从下拉列表中选择值时如何显示特定div的输入框？答案

【问题标题】：How to display the input box of a particular div when a value is selected from dropdown?从下拉列表中选择值时如何显示特定div的输入框？
【发布时间】：2017-01-12 15:35:16
【问题描述】：

我有一个重复多次的 div，其中包含一个选择框，它有一个值 Advanced。当我在特定 div 的下拉列表中选择该值时，我想显示一个与该 div 对应的输入框。

<div >

<select name="skilltest">

         <option value="advanced">Avanced</option> 

</select>

<input type="text" class="disableskill"/>

</div>

我写了一个jquery脚本来显示输入框，如下图：

$("select.skilltest").change(function()
{
    var skillvalue=$(this).val();

    if(skillvalue == "Advanced" || skillvalue  == "advanced")
    {
        $(".disableskill").show();
    }
    else{

        $(".disableskill").hide();
    }
});

如何做到这一点？

【问题讨论】：

我会看看在 jQuery 中选择兄弟姐妹 api.jquery.com/siblings
为什么不使用复选框？选择列表只有一个选项有什么意义？
@SamOnela 也许将来可能会添加更多选项，或者他们只是不想处理在服务器上为未选中框指定逻辑。不能怪他，个人。复选框有点烦人。

标签： javascript jquery selectlist

【解决方案1】：

可以使用 next() 函数从 $(this) 中选择下一个元素：

$("select[name=skilltest]").change(function(){
  var skillvalue=$(this).val();
  if(skillvalue == "Advanced" || skillvalue  == "advanced"){
    $(this).next(".disableskill").show();
  } else{
    $(this).next(".disableskill").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select name="skilltest">
    <option>--please select--</option>
    <option value="advanced">Avanced</option> 
  </select>
  <input type="text" class="disableskill" style="display:none;"/>
</div>

【讨论】：

【解决方案2】：

你可以试试这个。使用 next() 方法，您可以隐藏或显示下一个输入。

$(".skilltest").change(function()
{
    var skillvalue = $(this).val();
    if(skillvalue == "Advanced" || skillvalue  == "advanced")
    {
        $(this).next(".disableskill").show();
    }
    else{
        $(this).next(".disableskill").hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select class="skilltest">
    <option value="0"></option>
    <option value="advanced">Avanced</option> 
  </select>
  <input type="text" class="disableskill" style="display:none"/>
</div>

<div>
  <select class="skilltest">
    <option value="0"></option>
    <option value="advanced">Avanced</option> 
  </select>
  <input type="text" class="disableskill" style="display:none"/>
</div>

【讨论】：

【解决方案3】：

您可以在 IF 块中尝试以下脚本，无需额外条件

$(".skilltest").change(function()
{
    var skillvalue = $(this).val().toLowerCase();
    if(skillvalue  == "advanced")
    {
        $(".disableskill").show();
    }
    else{
        $(".disableskill").hide();
    }
});

【讨论】：