【问题标题】:Select item in dropdown needs to show / hide another dropdown [duplicate]下拉列表中的选择项目需要显示/隐藏另一个下拉列表[重复]
【发布时间】:2014-03-18 00:58:29
【问题描述】:

我有一个下拉菜单,当我选择“安排”时,另一个下拉菜单需要可见。 当您再次选择其他字段时,第二个下拉菜单需要“重置/不选择”。

我该怎么做?

HTML:

<table width="300" border="0" cellspacing="0" cellpadding="0">  
  <tr>
    <td>Select:</td>
    <td align="right">
    <select name="mydropdown" class="formfield">
        <option value="">No selection</option>
        <option value="Diner">Diner</option>
        <option value="Lunch">Lunch</option>
        <option value="Arrangement">Arrangement</option>
    </select>
    </td>
  </tr>
  <tr>
    <td height="10"></td>
    <td> </td>
  </tr>
  <tr class="go-hide">
    <td>Type arrangement</td>
    <td align="right">
    <select class="formfield">
        <option value="">No selection</option>
        <option value="All you can eat Tapas">All you can eat Tapas</option>
        <option value="High Tea">High Tea</option>
        <option value="Combinaties">Combinations</option>
    </select>
    </td>
  </tr>
</table>

此处为示例: http://jsfiddle.net/fourroses666/R555U/1/

【问题讨论】:

    标签: select drop-down-menu show-hide


    【解决方案1】:

    这行得通:

    $(document).ready(function(){
    
        $('#keuze').change(function () {
            if ($('#keuze option:selected').text() == "Arrangement"){
                $('.go-hide').hide();
                $('#arrangement').show();
                $('#combinatie option:eq(0)').attr('selected','selected');
            } else if ($('#keuze option:selected').text() == "Combinatie"){
                $('.go-hide').hide();
                $('#combinatie').show();
                $('#arrangement option:eq(0)').attr('selected','selected');
            } else {
                $('.go-hide').hide();
                $('#arrangement option:eq(0)').attr('selected','selected');
                $('#combinatie option:eq(0)').attr('selected','selected');
            } });
    
    });
    

    【讨论】:

      猜你喜欢
      • 2011-10-23
      • 1970-01-01
      • 1970-01-01
      • 2016-11-04
      • 1970-01-01
      • 2015-10-29
      • 2017-04-01
      • 2013-11-12
      • 1970-01-01
      相关资源
      最近更新 更多