Question

我有一个区域，其中动态添加一大块HTML（如下所示），就像用户想要的那样。不用担心。问题是，在HTML块中是一个选择框，然后是一个默认隐藏的div，但是如果从选择菜单中选择了“下拉”选项，则应该显示。

<div>
    <select name="" class="select_change">
      <option value="">--Select One--</option>
      <option value="textarea">Text Area</option>
      <option value="textbox">Text Box</option>
      <option value="checkbox">Check Box</option>
      <option value="dropdown">Drop Down</option>
    </select>
</div>
<div class="dropdown_fields hidden">
  <label>Options</label>
  <p><textarea name="" rows="8" cols="40"></textarea></p>
  <p class="field_desc">Please enter the values that should display in the Drop Down, one per line.</p>
</div>

所以，当有多个相同的HTML块时，我遇到的问题是显示/隐藏该div。

我所假设的是我需要说调用的菜单之后的div是唯一需要对其应用操作的div ...但我不知道该怎么做。

Answer 1

假设toggle-able div跟随选择父级（如您的示例所示）：

$(".select_change").live("change", function(){
  $(this).val() === "dropdown" 
    ? $(this).parent().next().show() 
    : $(this).parent().next().hide();
  }
});

Answer 2

将您的选择开场标记更改为以下内容：

<select name="" class="select_change" onchange="if ($(this).val() == 'dropdown') { $(this).closest('div').next('div').removeClass('hidden'); } else { $(this).closest('div').next('div').addClass('hidden'); }">

Answer 3

你可以这样做：

$('select.select_change').change(function(e){
    $(this).parent('div').next('div.dropdown_fields').removeClass('hidden');
});

jQuery：show（）和hide（）按顺序？

3 个答案: