带文本输入的选择框

Question

I have the following Select-Box:

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

No I want to achieve, that If the first option is selected (the one without name), there appears an text-input field, so someone can write his own value into it.

How is that possible?

Answer 1

Do something with .change() event in conjunction with .toggle() :

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

Answer 2

Add an input box

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

Add an on-change event http://api.jquery.com/on/

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

Answer 3

If using 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" />