如何编辑jquery customSelect标记

Question

我有一个正常选择标记的选择标记，它是使用自定义选择框创建的。现在我想在onc​​hange上添加和删除选项但是没有任何工作我相信这是因为select标签是使用自定义选择框创建的。

请协助我如何编辑使用自定义选择标记创建的更改时的选择标记。

Html代码

<div class="text" style="width: 300px;">   <span align='center' id='text' style='display:none'></span>
<select  id="secretQ" name="secretQ" onchange="checkCustom(this,5)" style="width:300px;">
    <option> </option>
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >2</option>
    <option value="4" >2</option>
</select>

要移除和添加选项的代码

// remove element
$("#secretQ" option[value == "+ques+"]").remove();

// add element
$("#secretQ").append("<option value="+oldValue+">"+oldValue+"</option>");

但上面的代码不起作用。我在网上发现了一些像触发器渲染的东西，它会重新加载customSelect标签

Answer 1

您可以为选择添加一个选项，如下所示：

$('#secretQ').append('<option value="3">three</option>');

并删除如下选项：

$('#secretQ').find("option[value=3]").remove();

修改

现在你已经指定了真正想要的东西，试试这个：

<强> HTML

<select class="mySelect" id="select_1" onchange="disableSelected(this)">
    <option selected="selected" disabled="disabled">select an option...</option>
    <option class="select_option" value="1">one</option>
    <option class="select_option" value="2">two</option>
    <option class="select_option" value="3">three</option>
    <option class="select_option" value="4">four</option>
</select>

<select class="mySelect" id="select_2" onchange="disableSelected(this)">
    <option selected="selected" disabled="disabled">select an option...</option>
    <option class="select_option" value="1">one</option>
    <option class="select_option" value="2">two</option>
    <option class="select_option" value="3">three</option>
    <option class="select_option" value="4">four</option>
 </select>

<select class="mySelect" id="select_3" onchange="disableSelected(this)">
    <option selected="selected" disabled="disabled">select an option...</option>
    <option class="select_option" value="1">one</option>
    <option class="select_option" value="2">two</option>
    <option class="select_option" value="3">three</option>
    <option class="select_option" value="4">four</option>
</select>

<select class="mySelect" id="select_4" onchange="disableSelected(this)">
    <option selected="selected" disabled="disabled">select an option...</option>
    <option class="select_option" value="1">one</option>
    <option class="select_option" value="2">two</option>
    <option class="select_option" value="3">three</option>
    <option class="select_option" value="4">four</option>
</select>

<强> JS

function disableSelected(selector) {
    var toBeDisabled = selector.value;
    selectedOptions = [];

    $.each($('.mySelect'), function () {
        var id = $(this).attr('id');
        $.each($(this).children('.select_option'), function () {
        if (id != selector.id && $(this).context.value == toBeDisabled) {
            $(this).prop("disabled", true);
        };

        if ($(this).context.selected) {
            selectedOptions.push($(this).context.value);    
        };
    });
});
enableUnselected(selectedOptions);
}

function enableUnselected (selectedOptions) {
    $.each($('.select_option'), function () {
        if( $.inArray($(this).context.value, selectedOptions) == -1) {
            $(this).prop("disabled", false);
        };
    });
}