Question

这里我带来两个问题是onload所有列表框都要隐藏依赖于单选按钮列表框必须显示/隐藏列表框但它不在这里工作而另一个是我必须检查列表框选项值是否包含空值或空的空间，如果我必须删除它。那也没有在那里工作，代码中的任何错误都可以帮助解决这个问题。

<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>

Refer the link

Answer 1

看一下fiddle provided

小提琴 http://jsfiddle.net/Varinder/tHXN3/1/

内联JS事件调用被视为bad practice。

如果您注意到逻辑被重复超过三次，通常它是重构的好指示。

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

根据所选的单选按钮显示一系列或相关字段
重置与当前活动的单选按钮无关的所有字段
在页面上加载剥离所有具有“空值”或仅为空字符串的选择框选项。

通过jQuery遍历它时，对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>

首先，您会注意到data-attributes在这种情况下使用data-dependson，其中div的类名包含依赖字段

<强> JS

首先缓存对将要（ab）使用的所有元素的引用：

var $aGroupRadioButtons = $("input[name='A']");
var $formRow = $(".form-row");
var $allDropdowns = $formRow.find("select");

处理FormSections（.maingroup-section，.subgroup-section等）可以在下面的函数中抽象出来，它引用当前活动的formsection并隐藏和重置兄弟表单部分的值。

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

    resetFormSections( $otherFormSections );
}

并且resetFormSections函数会重置参数提供的表单部分的input和select元素

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

好吧，上面两个函数足以显示依赖表单部分，隐藏和重置其他表单部分。

现在你可以通过事件处理程序连接这些函数，我使用jQuery 1.8，所以我可以使用$(selector).on("event", handler)语法。

$aGroupRadioButtons.on("click", function(e) {
    var $radioItem = $( this );
    var dependantSectionName = $radioItem.attr("data-dependson");
    var $dependantSectionElement = $( dependantSectionName );

    handleFormSections( $dependantSectionElement )
});

从上面的代码开始，它查看data-dependson值以确定要显示的表单部分以及要隐藏的部分。

沿着这条线的某个地方你想要去除空值或空值。再次，我们如何为我们创建一个处理它的函数？并且可能将其称为removeNullOrEmptyOptionsFrom( 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-row容器中的每个选择框上调用上述功能，如下所示：

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

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

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

单击“事件和选项值”

1 个答案: