Question

我有以下选择框：

<select class="form-control" id="a-tenantID2">
    <option value="">Only Tenant</option>
        <optgroup label="editor">
            <option value="none"></option>
            <option value="test1">test1</option>
        </optgroup>
    </option>
</select>

不，我想实现，如果选择了第一个选项（没有名称的选项），则会出现一个文本输入字段，因此有人可以将自己的值写入其中。

这怎么可能？

Answer 1

将.change()事件与.toggle()：

结合使用

$('.form-control').change(function(){
    $('#idofInput').toggle(this.value === "none");
}).change();

Answer 2

添加输入框

<input class="form-input" name="value" type="text" style="display:none">

添加更改事件 http://api.jquery.com/on/

$(document).on("change", ".form-control", function(){
    if ($(this).val()=="none")
        $(".form-input").show();
    else 
        $(".form-input").hide();
});

Answer 3

如果使用vanilla Javascript：

document.getElementById('a-tenantID2').addEventListener('change', function (e) {
  document.getElementById(this.id + '_input').classList[this.value !== 'none' ? 'add' : 'remove']('hidden');
});

.hidden {
  display: none;
}

<select class="form-control" id="a-tenantID2">
  <option value="">Only Tenant</option>
  <optgroup label="editor">
    <option value="none"></option>
    <option value="test1">test1</option>
  </optgroup>
</select>
<input type="text" id="a-tenantID2_input" class="hidden" />

带有textinput

3 个答案: