Question

我在选择选项中的某些条件为真时尝试显示/附加文本字段，问题是，它不仅仅是一个选择选项，它不止一个，所以它让我感到困惑......

这是我的HTML：

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

我的Jquery：

$(document).on("change", ".select", function(){
   var value = $(".select").val();
   if(value == "Checked"){
       var input = "<input type='text' name='test'>";
       $(".select").html(input);
   }
});

我的代码无效，即使input未显示......

任何帮助都将非常感激

Answer 1

您可以使用this获取当前更改的选择。还可以使用next来获取要添加输入的范围。

$(document).on("change", ".select", function(){
   var value = $(this).val();
   if(value == "Checked"){
   var input = "<input type='text' name='test'>";
   $(this).next('.text_area_appended_here').html(input);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-2">
<select name="check[]" class="form-control select">
    <option>Checked</option>
    <option>UnChecked</option>
</select>
<span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
<select name="check[]" class="form-control select">
    <option>Checked</option>
    <option>UnChecked</option>
</select>
<span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
<select name="check[]" class="form-control select">
    <option>Checked</option>
    <option>UnChecked</option>
</select>
<span class="text_area_appended_here"></span>
</div>

Answer 2

我修改了你的代码，假设你想在选择项的值为“Checked”时显示文本框。

$(document).on("change", ".select", function(){
   var value = $(this).val();
   if(value == "1"){
       var input = "<input type='text' name='test'>";
       $(this).parent().find(".text_area_appended_here").html(input);
   } else {
       $(this).parent().find(".text_area_appended_here").empty();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option value="">Select something</option>
        <option value="1">Checked</option>
        <option value="0">UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option value="">Select something</option>
        <option value="1">Checked</option>
        <option value="0">UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
        <option value="">Select something</option>
        <option value="1">Checked</option>
        <option value="0">UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

Answer 3

我想你应该试试这个。下面的代码将采用所选的＆＃34;选择框＆＃34;并将您的输入附加到选定的＆＃34;选择框＆＃34;

旁边

$(document).on("change", ".select", function(){
   var value = $(this).val(); //change
   if(value == "Checked"){
       var input = "<input type='text' name='test'>";
       $(this).next().html(input ); //change
   }
});

Answer 4

$('select').on("change", function(){
   var value = $(this).val();
   if(value == "Checked"){
       var input = '<input type="text" value="'+$(this).val()+'" name="test">';
       $(this).parent('div').append(input);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
    <select name="check[]" class="form-control select">
    <option>---</option>
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
      <option>---</option>
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

<div class="col-md-2">
    <select name="check[]" class="form-control select">
    <option>---</option>
        <option>Checked</option>
        <option>UnChecked</option>
    </select>
    <span class="text_area_appended_here"></span>
</div>

试试这个。我希望它可以帮助你。

如何在选择选项更改时显示文本字段jquery

4 个答案: