发表新帖
发表新帖

jQuery remove SELECT options based on another SELECT selected (Need support for all browsers)

前端 未结
关注
5 935
粉色の甜心
粉色の甜心 2020-12-05 16:11

Say I have this dropdown:
提交评论
  •  加载中...
  • 执笔经年
    2020-12-05 16:31

    This works (tested in Safari 4.0.1, FF 3.0.13):

    $(document).ready(function() {
    //copy the second select, so we can easily reset it
    var selectClone = $('#theOptions2').clone();
    $('#theOptions1').change(function() {
        var val = parseInt($(this).val());
        //reset the second select on each change
        $('#theOptions2').html(selectClone.html())
        switch(val) {
            //if 2 is selected remove C
            case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
            //if 3 is selected remove A
            case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
        }
    });
});

    And the beautiful UI:

    <select id="theOptions1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>
    0 讨论(0)
  • 北恋
    2020-12-05 16:40

    try this. this will definitely work

          $(document).ready(function () {

    var oldValue;
    var oldText;
    var className = '.ddl';

    $(className)
                .focus(function () {
                    oldValue = this.value;
                    oldText = $(this).find('option:selected').text();
                })
                .change(function () {
                    var newSelectedValue = $(this).val();
                    if (newSelectedValue != "") {
                        $('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
                    }
                    if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
                        $(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
                    }
                    $(this).blur();
                });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
    <select class="ddl" id="A1" name="A1">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A2" name="A2">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A3" name="A3">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <select class="ddl" id="A4" name="A4">
        <option value="">Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
    </select>
    <hr />
    <input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>

    0 讨论(0)
  • 执念已碎
    2020-12-05 16:43

    You can add classes to your <option>s to store which go with each value of #theOptions1:

    <select id="theOptions2">
  <option value="a" class="option-1 option-2">a</option>
  <option value="b" class="option-1 option-2 option-3">b</option>
  <option value="c" class="option-1 option-3">c</option>
</select>

    then do this:

    $(function() {
    var allOptions = $('#theOptions2 option').clone();
    $('#theOptions1').change(function() {
        var val = $(this).val();
        $('#theOptions2').html(allOptions.filter('.option-' + val));
    });
});
    0 讨论(0)
  • 猫巷女王i
    2020-12-05 16:51

    For the record you can NOT remove options in a select list in Internet Explorer.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题