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

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

这是我的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);
   }
});

$（document）.on（“更改”，“选择”，函数（））{
var值=$（“.select”）.val（）；
如果（值==“选中”）{
var输入=”；
$（“.select”）.html（输入）；
}
});

我的代码不工作，甚至

输入

也不显示

---

非常感谢您的任何帮助

您可以使用

此

获取当前更改选择。还可以使用

next

获取要添加输入的范围

$（document）.on（“更改”，“选择”，函数（））{
var值=$（this.val（）；
如果（值==“选中”）{
var输入=”；
$（this）.next（'.text\u area\u added\u here'）.html（输入）；
}
});

选中的
未经检查
选中的
未经检查
选中的
未经检查
我稍微修改了您的代码，假设您希望在“选中”选择项的值时显示文本框


$（document）.on（“更改”，“选择”，函数（））{
var值=$（this.val（）；
如果（值=“1”）{
var输入=”；
$（this.parent（）.find（“.text\u area\u added\u here”）.html（输入）；
}否则{
$（this.parent（）.find（“.text\u area\u added\u here”）.empty（）；
}
});

挑选
选中的
未经检查
挑选
选中的
未经检查
挑选
选中的
未经检查
我想你应该试试这个。下面的代码将获取所选“选择框”的值，并将您的输入附加到所选“选择框”的旁边

$（document）.on（“更改”，“选择”，函数（））{
var value=$（this）.val（）；//更改
如果（值==“选中”）{
var输入=”；
$（this）.next（）.html（输入）；//更改
}
});

$（'select'）。在（“更改”，函数（）上）{
var值=$（this.val（）；
如果（值==“选中”）{
var输入=“”；
$（this.parent（'div'）.append（input）；
}
});

---
选中的
未经检查
---
选中的
未经检查
---
选中的
未经检查
而不是$（“.select”）.val（）尝试$（this.find（“option:selected”）.text（）
$(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
   }
});