Показать текстовое поле с выбранным раскрывающимся списком

Question

Я пытаюсь заставить форму отображать текстовое поле после выбора выпадающего меню.

Таким образом, когда выбран параметр other , поле ввода будет отображаться и станет обязательным .

function chooseOther()
{
    var option = document.getElementById("inputJob");
    if (option == 'Other'){
        var field = document.getElementById("inputOtherJob");
        field.style.display = 'inline';
    }
}

<p> What is your profession? </p>
<select id="inputJob" name="inputJob" onchange = 'chooseOther()'>
  <option value="Student">Student</option>
  <option value="Teacher">Teacher</option>
  <option value="Other">Other</option>
</select>
<input id = "inputOtherJob" name = "inputOtherJob" style = 'display: none'>

Answer 1

Используйте if(option.value == 'Other'), вы должны сравнить option.value, а не option, потому что опция instanceof HTMLElement, поэтому вы должны получить value.

function chooseOther()
{
    var option = document.getElementById("inputJob");
    if (option.value == 'Other'){
        var field = document.getElementById("inputOtherJob");
        field.style.display = 'inline';
    }
}

<p> What is your profession? </p>
<select id="inputJob" name="inputJob" onchange = 'chooseOther()'>
  <option value="Student">Student</option>
  <option value="Teacher">Teacher</option>
  <option value="Other">Other</option>
</select>
<input id = "inputOtherJob" name = "inputOtherJob" style = 'display: none'>

Answer 2

Вот быстрое решение. В первую очередь вы хотите протестировать против option.value == 'Other', а не option == 'Other'

<select id="inputJob" name="inputJob" onchange='chooseOther()'>
    <option value="Student">Student</option>
    <option value="Teacher">Teacher</option>
    <option value="Other">Other</option>
</select>
<input id="inputOtherJob" name="inputOtherJob" style='display: none'>
<script>
    function chooseOther() {
        var option = document.getElementById("inputJob");
        if (option.value == 'Other') {
            var field = document.getElementById("inputOtherJob");
            field.setAttribute("style","display:inline");
        }
    }
</script>

Answer 3

option.selectedOptions [0] .text для отображения выделенного текста.

Используйте атрибут обязательный, чтобы сделать его обязательным.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required