javascript - 无法隐藏字段并根据选择填充字段

Question

我正在尝试:1.基于SELECT字段的隐藏和显示字段2. 根据复选框填充字段然而两者都不起作用。两者都是基于其他人的工作解决方案。我能想到的唯一区别是我使用 TABLE 来格式化它们。但我不知道这是否会产生影响。

HTML 代码:

<form method="POST">
    <table cellspacing="2" cellpadding="2">
        <tr>
            <td valign="top" /><b>Business:</b>
        <td><select id="business" name="business" >
            <option value="1">Sell</option>
            <option value="2">Buy</option>
            <option value="3">Both</option>
            <option value="4">Trade</option>
            <option value="5">Freight</option>
            <option value="6">Customs</option>
            </select>
        </td>
        </tr>    

        <div id="freight">
        <tr>
            <td><b>Service Type:</b></td>
        <td><select name="type">
            <option value="1">Air Cargo</option>
            <option value="2">Couriers</option>
            <option value="3">Freight Forwarder</option>
            </select>
            </td>   
        </tr>
        <tr>
            <td><b>Tollfree Number:</b></td>
            <td><input type="text" name="tollfree" />
            </td>
        </tr>
        </div>
                <tr>
                    <td valign="top"><b>Your Email Address:</b></td>
            <td><input type="text" name="email" /></td>
                    </tr>
    <div id="customs">
    <tr>
        <td /><b>Services:</b>
        <td>
            <input type="checkbox" value="ACA - Air Cargo Agent" />ACA - Air Cargo Agent<br /> 
            <input type="checkbox" value="AFF - Air Freight Forwarder" />AFF - Air Freight Forwarder<br /> 
        </td>
    </tr>
    </div>
            <tr>
            <td><b>Products/Services:</b></td>
            <td><input type="text" name="products" /></td>
            </tr>   
    <div id="brand">
        <tr>
            <td><b>Brand Names:</b></td>
            <td><input type="text" name="brands" /></td>
        </tr>
    </div>
    </table>
</form>

执行这些操作的 jQuery 代码:

$(':checkbox').click(function() {
    $('input[name=products]').val(
        $(':checkbox:checked').map(function() {
            return $(this).val();
        }).get().join(',')
    );
});
$(document).ready(function () {
    toggleFields(); 
    $("#business").change(function () {
        toggleFields();
    });

});
function toggleFields() {
    if ($("#business").val() == 1 || ($("#business").val() == 2 || ($("#business").val() == 3)
        $("#brand").show();
        $("#freight").hide();
        $("#customs").hide();
    else
        if ($("#business").val() == 5)
            $("#brand").hide();
            $("#freight").show();
            $("#customs").show();
        else
            if ($("#business").val() == 6)
                $("#brand").hide();
                $("#freight").hide();
                $("#customs").show();   
            else
                $("#brand").hide();
                $("#freight").hide();
                $("#customs").hide();               
}

例如，当您选择“出售”、“购买”或“两者”(在商业中)时，服务类型和 TOLLFREE NUMBER 字段以及服务字段都应该被隐藏。它们被包裹在 DIV id“运费”和“海关”中，并且应该是不可见的。但他们不是。无论如何，所有字段都会显示。

第二个问题是，如果您选择海关(在业务中)，则应显示由复选框组成的服务字段，并且当单击复选框时，这些复选框中的值应填充产品/服务字段。它也没有这样做。

这是此代码的 jsfiddle:

http://jsfiddle.net/5SArB/571/

这是基于两者的工作版本

jsfiddle.net/5SArB/(根据表单值切换字段)

和

jsfiddle.net/dTrVt/(根据复选框 ID 值填充输入字段)

我对此很烦恼，只是不明白为什么它不起作用。任何帮助表示赞赏。预先感谢您。

Answer 1

代码存在几个问题，第一个是 JavaScript 的格式很差。

1. 如果 if 语句多于一行，则不能编写没有大括号的 if 语句
2. toggleFields 中的第一个 if 语句缺少一些括号

一旦你解决了这个问题，另一个问题就涉及到你的 html 表格的形成。不要用 div 包裹表格行，因为这是不正确的 html 表格结构。相反，您可以取出 div，并将“id”分配给表行。本质上，您要做的就是显示/隐藏表格行，而不是显示/隐藏包含表格行的 div。

生成的 HTML 将是:

<tr id="freight">
    ...
</tr>

而不是:

<div id="freight">
    <tr>
        ...
    </tr>
</div>

这是一个fiddle与建议的更改。

希望有帮助!

编辑:以防将来有人遇到此问题，问题是加载顺序的简单问题 - 绑定(bind)单击事件时文档尚未准备好。解决方案很简单，只需将 click 事件移至 document.ready 回调中即可。