Javascript 单击事件和选项值

这里我有两个问题，一个是关于onload所有listbox要隐藏依赖单选按钮listbox必须显示/隐藏listbox，但它不在这里工作，另一个是我必须检查listbox选项值是否包含null值或空格，如果这意味着我必须删除它。这太不管用了，代码中的任何错误都可能有人在这方面提供帮助

<script>
    if ($('input[name=B]:checked').val() == "city") {

        $("#country,#zone,#state,#Areamanager,#outlet").val('');

        $("#country_value,#zone_value,#state_value,#Areamanager_value,#outlet_value").val('');
        $("#city").show();

        $("#country,#zone,#state,#Areamanager,#outlet").hide();


    }

    $.each(main, function (i, val) {
        if (val == "Null Value" || val == "") {
            val = null;
        }
    });
</script>

看了一眼

拨弄

它被认为是内联JS事件调用

通常，如果您注意到逻辑被重复了三次以上，那么重构是一个很好的指示

纠正我如果我错了，你的要求是：

根据所选单选按钮显示一组或相关字段 重置与当前活动单选按钮无关的所有字段 在页面加载中，删除所有具有空值或仅为空字符串的选择框选项。 当通过jQuery遍历HTML时，在HTML方面进行一点重构可以大有帮助：

这里的结构，我想会更适合你的要求在这进一步下去。通过只处理第一个单选按钮行，我将其简化了一点：

<table cellpadding="0" cellspacing="0" border="2">
    <tr>
        <td><input type="radio" name="A" data-dependson=".maingroup-section"/></td>
        <td><font size="2">Main Group</font></td>
            <td><input type="radio" name="A" data-dependson=".subgroup-section"/></td>
        <td><font size="2">Sub Group</font></td>
            <td><input type="radio" name="A" data-dependson=".itemname-section" /></td>
        <td><font size="2">Item Name</font></td>
    </tr>
</table>

<div class="form-row">
    <div class="maingroup-section">
        field values related to main group:<br />
        <select id="maingroup">
            <option value="Null Value">Null Value</option>

            <option value="1">AA</option>
            <option value="2">BB</option>
            <option value="3">CC</option>
            <option value="Null Value">Null Value</option>
        </select>
        <input type="hidden" id="maingroup_value" />
    </div>

    <div class="subgroup-section">
        field values related subgroup:<br />
        <select id="subgroup">
            <option value="Null Value">Null Value</option>

            <option value="1">DD</option>
            <option value="2">EE</option>
            <option value="3">FF</option>
            <option value="Null Value">Null Value</option>

        </select>
        <input type="hidden" id="subgroup_value" />
    </div>

    <div class="itemname-section">
        field values related to itemname:<br />
        <select id="itemname">
            <option value="Null Value">Null Value</option>

            <option value="1">GG</option>
            <option value="2">HH</option>
            <option value="3">II</option>
            <option value="Null Value">Null Value</option>

        </select>
        <input type="hidden" id="itemname_value" />
    </div>
</div>

处理formsection.maingroup section、.subgroup section等可以在下面这样的函数中抽象出来，它引用当前活动的formsection并隐藏和重置同级表单节的值

function handleFormSections( $formSection ) {
    var $currentFormSection = $formSection.show();
    var $otherFormSections = $currentFormSection.siblings().hide();

    resetFormSections( $otherFormSections );
}

和resetFormSections函数重置输入并选择参数提供的表单节的元素

function resetFormSections( $formSections ) {
    $formSections.find("select").val("");
    $formSections.find("input").val("")
}

那么，上述两个功能足以显示从属表单部分，隐藏和重置其他表单部分

function handleFormSections( $formSection ) {
    var $currentFormSection = $formSection.show();
    var $otherFormSections = $currentFormSection.siblings().hide();

    resetFormSections( $otherFormSections );
}

现在，您可以通过事件处理程序连接这些函数，im使用jQuery1.8，这样我就可以使用$selector.onevent处理程序语法

从上面的代码可以看出，它通过查看数据dependson值来标识要显示的表单部分和要隐藏的表单部分

沿着这条线的某个地方，你会想要去掉空值或空值。再说一次，我们创建一个函数来处理它怎么样？也可以将其称为Removenull或EmptyoOptions from selectBox，它将接收要处理的selectBox元素，方法如下：

function removeNullOrEmptyOptionsFrom( selectBox ) {
    var $selectBoxOptions = $(selectBox).children();

    $selectBoxOptions.each(function() {
        var $option = $(this);
        var optionValue = $option.attr("value");
        if ( optionValue == "Null Value" || optionValue == "" ) {
            $option.remove();
        }
    });
}

现在，您可以对.form行容器中的每个选择框调用上述函数，如下所示：

$allDropdowns.each(function() {
    removeNullOrEmptyOptionsFrom( this );
});

我注意到在您的代码中有一个对combobox方法的调用，如果它是一个jQuery插件，那么在去掉所有null或空选项后调用它可能是一个好主意：

// $allDropdowns.combobox(); // initialize combox once maybe after reseting selects?

---

请检查您的浏览器控制台是否有错误，因为在fiddle中存在错误。并在发布问题之前将jquery库包含在FIDLE中。我是否更新链接？？您的浏览器中是否存在未捕获的语法错误：意外的令牌错误？在小提琴中有这个错误。您知道如何检查浏览器右侧F12->Console中的错误或红色错误指示？是的，我有两个错误显示为未捕获语法错误：意外标记未捕获引用错误：fu未定义该fu错误调用document.ready中的fu方法，而不是，并通过匹配大括号作为代码删除另一个对于我们来说，删除该错误是非常复杂的。为了简短的帮助，请检查您是否在浏览器控制台中获得了行号。首先，感谢您的努力，解释也很好。是的，我的要求是正确的。请听我说，在我的项目中，他们有太多标记库，所以我无法直接处理选择框，我只使用一个选择框名称或id，只有我可以与浏览器交互。因此，通过选择框名称或id可以做到这一点，这很有用？？嘿，对不起-我有点难以理解。在我的项目中有这么多taglib，你是说在我的项目中有这么多taglib吗？如果是的话，我不明白你所说的taglib是什么意思，组合框，我们手动提供一个名称或id，这样它将在浏览器中创建一个列表框选项…现在我尝试通过列表框名称或id获取，并尝试自定义它…根据需要

// $allDropdowns.combobox(); // initialize combox once maybe after reseting selects?