JavaScript/jQuery：选择列表/下拉值为“其他”时添加文本框

Question

我正在编写一个包含多个选择列表的表单，其中包括值“其他”。我需要编写一个 Javascript/JQuery 函数，如果 value === "Other" 则插入一个文本框，然后在提交表单时将字段的值保存为文本框中的值。我被困在如何实现这一点上。它当然不能使用和 ID，因为页面上至少有两个输入需要使用此功能。我目前正在尝试使用类使其工作，这是我得到的代码：function doSomething(){  if($(".selectlist :selected").text() === "Other"){    $(".selectlist :selected").add("<input type=text></input>").appendTo(document.body);  }}这种方法有效，但正如您所见，它在创建输入时将“其他”值从选择列表中拉出。我听说过event.target并使用thisor $(this)，但我在 JQuery 方面没有太多经验，滚动浏览 JQuery 文档对我没有多大帮助，我一直在使用.append(),等.appendTo()，.add()但我要去有点盲目（在这种情况下，不允许对输出进行硬编码并根据选择值显示/隐藏它）欢迎任何想法！

Answer 1

这有效：

function DoSomethingOnChange(selectBox) {

    if ($(selectBox).find(":selected").text().trim().toUpperCase() == "OTHER") {

        $('.other-input').show();

    }

    else {

        $('.other-input').hide();

        $('.other-input').val(""); //clear out the value if required

    }

}

当通过内联事件处理程序触发时，例如：

<select  onchange="DoSomethingOnChange(this)">

<option></option>

<option>One</option>

<option>Two</option>

<option>Other</option>

</select>

前提是您的选项之一有其他文字。

function DoSomethingOnChange(selectBox) {

  if ($(selectBox).find(":selected").text().trim().toUpperCase() == "OTHER") {

    $('.other-input').show();

  } else {

    $('.other-input').hide();

    $('.other-input').val("");

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select onchange="DoSomethingOnChange(this)">

  <option></option>

  <option>One</option>

  <option>Two</option>

  <option>Other</option>

</select>

<input class="other-input" hidden type=text placeholder="Other input" />

Answer 2

这样的事情可能会奏效

$("select").each(function(i,obj) { 

    if ($(obj).val() === "Other") {

        $(obj).parent().append("<input type=\"text\" name=\"" + $(obj).prop("name") + "\" />");

        $(obj).remove();

    }

});