Question

早上好，我希望有人可以帮我解决问题。我正在尝试创建此代码，以便如果选择x，它将显示另一个下拉列表似乎工作正常，但是如果我点击3下拉深度并选择另一个主下拉列表它不会隐藏最后显示的下拉列表。

例如：

如果你运行代码片段，你会看到如果你单击印度然后点击Orissa然后Nal - 但是然后将印度改为美国你仍会看到Nal最终下降 - 如果你第一次选择美国，它也会这样做 - 加州 - MRK或KRK。

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select2').html(options).show();
});


$("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select name="select1" id="select1">
    <option value="">Select Country</option>
    <option value="india">India</option>
    <option value="america">America</option>
</select>


<select name="select2" id="select2" style="display: none;">
    <option value="">Select State</option>
    <option data-value="india" value="orissa">Orissa</option>
    <option data-value="india" value="telangan">Telangan</option>
    <option data-value="america" value="america">USA</option>
    <option data-value="america" value="america">California</option>
</select>

<select name="select3" id="select3" style="display: none;">
    <option value="">Select city</option>
    <option data-value="orissa">Nal</option>
    <option data-value="orissa">Mir</option>
    <option data-value="telangan">Hyd</option>
    <option data-value="telangan">Vija</option>
    <option data-value="america">KRK</option>
    <option data-value="america">MRK</option>
</select>

Answer 1

当选择框1发生变化时，你应该触发第二个选择框，我只会注释$("#select3").hide();进行测试

$('#select2').trigger('change');

我希望这可以帮到你

＆＃13;

$("#select1").change(function() {
  
  //$("#select3").hide();
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select2').html(options).show();
  if($('#select3').is(':visible'))
        $('#select2').trigger('change');
});


$("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select name="select1" id="select1">
    <option value="">Select Country</option>
    <option value="india">India</option>
    <option value="america">America</option>
</select>


<select name="select2" id="select2" style="display: none;">
    <option value="">Select State</option>
    <option data-value="india" value="orissa">Orissa</option>
    <option data-value="india" value="telangan">Telangan</option>
    <option data-value="america" value="america">USA</option>
    <option data-value="america" value="america">California</option>
</select>

<select name="select3" id="select3" style="display: none;">
    <option value="">Select city</option>
    <option data-value="orissa">Nal</option>
    <option data-value="orissa">Mir</option>
    <option data-value="telangan">Hyd</option>
    <option data-value="telangan">Vija</option>
    <option data-value="america">KRK</option>
    <option data-value="america">MRK</option>
</select>

＆＃13;

Answer 2

仅#set columns names df = pd.DataFrame(x[:30], columns = ['days','hours','val']) d = {0: 'Mo', 1: 'Tu', 2: 'We', 3: 'Th', 4: 'Fr', 5: 'Sa', 6: 'Su'} df1 = df.groupby(['days', 'hours'])['val'].sum().unstack(0, fill_value=0) df1 = df1.rename(columns=d).reindex_axis(range(24), fill_value=0) print (df1) days Mo Tu We Th Fr Sa Su hours 0 0 0 0 0 0 0 0 1 0 0 0 0 0 2 0 2 0 0 0 0 0 0 0 3 0 0 0 0 0 0 0 4 0 0 0 0 0 0 0 5 0 0 0 0 0 0 0 6 0 0 0 0 0 0 0 7 0 0 0 0 1 1 0 8 0 0 0 2 0 0 0 9 0 0 0 3 1 0 0 10 0 2 0 0 0 0 0 11 0 0 0 3 0 0 0 12 0 0 0 0 0 0 1 13 0 0 0 1 0 1 0 14 0 0 0 0 1 0 0 15 0 0 0 0 1 0 0 16 0 0 0 0 0 0 0 17 0 0 1 0 0 0 0 18 0 3 0 0 1 0 0 19 1 0 0 1 0 1 0 20 0 0 0 0 0 0 0 21 0 0 0 0 0 0 0 22 0 1 0 0 0 0 0 23 1 0 0 0 0 0 0 1 {/ .hide()元素<select>事件上的3 change元素

<select>

$("#select1").change(function () {
    $('#select3').hide();
    //Rest of your code
});

$("#select1").change(function() {
  $('#select3').hide();

  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select2').html(options).show();
});


$("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options).show();
});

Answer 3

Hide third select的{{1}}框onchange

first select

＆＃13;

$("#select1").change(function() { $('#select3').hide(); .... });

＆＃13;

$("#select1").change(function() {
   
    $('#select3').hide();
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select2').html(options).show();
});


$("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options).show();
});

＆＃13;

Answer 4

＆＃13;

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select2').html(options).show();
});


$("#select2").change(function() {
  if ($(this).data('options') == undefined) {
    $(this).data('options', $('#select3 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-value=' + id + ']');
  $('#select3').html(options).show();
});

$("#select1").change(function() {      $('#select3').hide(); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select name="select1" id="select1">
    <option value="">Select Country</option>
    <option value="india">India</option>
    <option value="america">America</option>
</select>


<select name="select2" id="select2" style="display: none;">
    <option value="">Select State</option>
    <option data-value="india" value="orissa">Orissa</option>
    <option data-value="india" value="telangan">Telangan</option>
    <option data-value="america" value="america">USA</option>
    <option data-value="america" value="america">California</option>
</select>

<select name="select3" id="select3" style="display: none;">
    <option value="">Select city</option>
    <option data-value="orissa">Nal</option>
    <option data-value="orissa">Mir</option>
    <option data-value="telangan">Hyd</option>
    <option data-value="telangan">Vija</option>
    <option data-value="america">KRK</option>
    <option data-value="america">MRK</option>
</select>

＆＃13;

更新：

$（＆＃34;＃select1＆＃34;）。change（function（）{$（＆＃39; #select3＆＃39;）。hide（）; }）;

Answer 5

一种方法是在下拉之间建立关系，以便彼此了解。这可以通过使用数据属性来实现。

下面的代码本身不起作用。你可能要把它清理干净了。应用。这只是给出了方法的概念。

<select class="select-elem" name="select1" data-childselect="select2" data-parentselect="" ></select>
<select class="select-elem" name="select2" data-childselect="select3" data-parentselect="select1" ></select>
<select class="select-elem" name="select3" data-childselect="" data-parentselect="select2" ></select>

并使用jquery隐藏/显示相关的下拉列表

$(".select-elem").on("click", function () {
    var p = $(this).data("parentselect");
    var c = $(this).data("childselect");

    // show the child 
    $("[name=" + c + "]").show();

});

显示/隐藏选择值jQuery

5 个答案: