Question

我有一个 DIV ，其中包含两个下拉列表（maindd和subdd）以及一个单独的 DIV 中的ADD按钮。如果我单击添加按钮我生成另一个具有相似值的两个下拉列表具有相同的值（如maindd和subdd）。如果我再次单击“添加”按钮，再次生成一个带有两个下拉列表的div（名称为maindd和subdd）。就像我想要多少次一样，我可以点击ADD按钮并添加一个带有两个下拉菜单的DIV。

问题是，如果我更改第一个 DIV 第一个下拉列表（maindd）值，我需要显示相同的对应的下拉列表（subd） div不在另一个 DIV 。类似地，对于第二个DIV下拉列表更改，我需要显示其相应的第二个DIV下拉列表。

注意：默认情况下，所有第二个下拉列表（subdd）都设置为＆＃34; display：none; ＆＃34;通过CSS。我正在使用JQUERY。

代码：

$(document).ready(function(){
    $(".recordnumber").on("change",function(){
        if ( this.value == 'other')
            {
                $(this).siblings(".othertype").show();
            }
        else
            {
                if(this.value != 'other')
                {
                    $(this).siblings(".othertype").hide();
                }
            }
    });
});

试过这个：

input {
  width:210px;
  height:10px;
  padding:20px;
}

这是正确的做法吗？

Answer 1

尝试此代码可能非常有用

$(".recordnumber").on("change",function(){
   $(".othertype").hide();
   $(this).siblings(".othertype").show();
});

<强> DEMO

Answer 2

检查以下代码可能对您有所帮助

＆＃13;

$(".recordnumber").on("change",function(){
   $(this).siblings(".othertype").css("display", "block");
});

＆＃13;

.othertype{
  display : none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div class="records">
    <select class="recordnumber" name="maindd">
      <option value="first">first</option>
      <option value="second">second</option>
      <option value="other">other</option>
    </select>
    <select class="othertype" name="subdd">
      <option value="one">One</option>
    </select>
    <input type="button" value="Add Row" />
  </div>

  <div class="records">
    <select class="recordnumber" name="maindd">
      <option value="first">first</option>
      <option value="second">second</option>
      <option value="other">other</option>
    </select>
    <select class="othertype" name="subdd">
      <option value="one">One</option>
    </select>
    <input type="button" value="Add Row" />
  </div>
</div>

＆＃13;

显示并隐藏相应下拉值更改的div

2 个答案: