Javascript / JQuery: добавить текстовое поле, если выбранный список / раскрывающееся значение «другое»

Question

Я пишу форму, которая имеет несколько списков выбора, включая значение «Другое».

Мне нужно написать функцию Javascript / JQuery, которая вставляет текстовое поле, если значение === "Другое" ", а затем сохраняет значение поля как то, что находится в текстовом поле при отправке формы. Я застреваю на том, как реализовать это. Конечно, он не может использовать и идентификатор, так как на странице будет как минимум два входа, которые должны использовать эту функцию.

В настоящее время я пытаюсь заставить его работать с использованием класса, вот код, который я ' ve got:

function doSomething(){
  if($(".selectlist :selected").text() === "Other"){
    $(".selectlist :selected").add("<input type=text></input>").appendTo(document.body);
  }
}

Этот тип работает, но, как вы увидите, он вытягивает значение «Other» из списка выбора при создании ввода. Я слышал о event.target и использовании this или $(this), но у меня нет большого опыта в JQuery, и моя прокрутка документации JQuery не очень мне помогла, я Я был в шутку с .append(), .appendTo(), .add() et c. но я буду немного слепым

(в данном случае нельзя просто жестко закодировать вывод и показать / скрыть его в зависимости от выбранного значения)

Любые идеи приветствуются!

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();
    }
});