更改选择选项时如何显示文本字段 [英] how to showing text field when select option is changed jquery

问题描述

当我的选择选项中的某些条件为true时，我尝试显示/附加文本字段，问题是，这不仅是一个选择选项，还不仅仅是一个选择选项，这让我感到困惑...

i tried showing / appending a textfield when some condition in my select option is true, the problem is, it's not just a one select option, it's more than one so it make me confused...

这是我的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 ...

my code is not working, even the input is not showed...

任何帮助将不胜感激

推荐答案

，您可以使用this来获取当前更改的选择.也可以使用next获取要在其中添加输入的跨度.

you can use this to get current changed select. Also use next to get the span in which you want to add input.

$(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>

这篇关于更改选择选项时如何显示文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！