Question

具有相关选项的两个下拉列表显示其值。我想重置所有选项并在用户更改第一个下拉列表时清除显示。

<div id="display">
    <p>Configuration: 
        <span class="examples"></span>
        <span class="select1"></span>
        <span class="select2"></span>
        <span class="select3"></span>
    </p>
    <div>
        <select id="examples">
            <option value="" selected>Choose Example</option>
            <option value="example1">Example1</option>
            <option value="example2">Example2</option>
        </select>

        <div id="ex1">
            <select id="select1">
                <option value="" selected>Choose selection</option>
                <option value="selection1">selection1</option>
                <option value="selection2">selection2</option>
                <option value="selection3">selection3</option>
            </select>
            <select id="select2">
                <option value="" selected>Choose selection</option>
                <option value="selection4">selection4</option>
                <option value="selection5">selection5</option>
                <option value="selection6">selection6</option>
            </select>
        </div>
        <div id="ex2">
            <select id="select3">
                <option value="" selected>Choose selection</option>
                <option value="selection7">selection7</option>
                <option value="selection8">selection8</option>
                <option value="selection9">selection9</option>
            </select>
        </div>
    </div>
</div>

js / jQuery

    $("#examples").change(function() {
    $("#ex1")[$(this).val() == "example1" ? 'show' : 'hide']("fast");
}).change();
$("#examples").change(function() {
    $("#ex2")[$(this).val() == "example2" ? 'show' : 'hide']("fast");
}).change();

$(document).ready(function(){    
    $('#display').on('change', "select", function(){
        displaySkus($(this));
    });
});

function displaySkus($current_select)
{
    var showme = $current_select.val();
    $current_select.closest('#display').find('.' + $current_select.attr("id")).text(showme)
}

感谢。

Answer 1

<script type="text/javascript">
    function showlevel1() {
        var l1 = document.getElementById('level1_category');
        l1.style.display = 'block';
        var l2 = document.getElementById('level2_category');
        l2.style.display = 'none';
    }

    function showlevel2() {
        var l2 = document.getElementById('level2_category');
        l2.style.display = 'block';
        var l1 = document.getElementById('level1_category');
        l1.style.display = 'none';

    }
    function categorySelectHandler(select) {

        if (select.value == '1') {

            var l1 = document.getElementById('level1_category');
            l1.style.display = 'none';
            var l2 = document.getElementById('level2_category');
            l2.style.display = 'none';

        } else if (select.value == '2') {
            showlevel1();
        } else if (select.value == '3') {
            showlevel2();
        }


    }
</script>


<html>
<select id="select_level" onchange="categorySelectHandler(this)">
      <option value="1">Create at level 1</option>
      <option value="2">Create at level 2</option>
      <option value="3">Create at level 3</option>
</select>


<select id="level1_category"  style="display:none;">

//   # Your Code Here

</select>

<select id="level2_category"  style="display:none;">

//   # Your Code Here

</select>
</html>

Answer 2

Something like this?

$("#examples").change(function() {
    $("#ex1 select, #ex2 select").val("");
    $("#ex1")[$(this).val() == "example1" ? 'show' : 'hide']("fast");
    $("#ex2")[$(this).val() == "example2" ? 'show' : 'hide']("fast");
}).change();

Answer 3

您可以通过这种方式更改代码以实现您的目标：

$("#examples").change(function() {
   $("#ex2")[$(this).val() == "example2" ? 'show' : 'hide']("fast");
   $('[id^="select"]').each(function(){
       $(this).find('option:first').prop('selected', true);
       displaySkus($(this));  //<-----to change the display here.
   });
}).change();

重置jQuery相关下拉列表的显示

3 个答案:

See the demo

Updated demo for reset the display