Добавление другого параметра при нажатии на выпадающий список?

Question

Мне нужно добавить новую опцию выбора в моем HTML, когда они щелкают по ней

<select class="statusButtonChange statusButton " data-value="49506">
    <option value="0" selected=""></option>
    <option value="1">Close</option>
    <option value="2" disabled="" style="color:grey;">Taken</option>
</select>

Эта новая опция - динамическая c и будет получена из ответа API ... Я ' парсинг значения var из ответа API, но сейчас я сделал его просто для проверки.

Прямо сейчас у меня есть это:

$(document).ready(function () {
    var k = 1
    $(".statusButton").on('focus', function () {
        var value = "Disable";
        var new_v = "";
        var html = $(".statusButton").html();

        if (k == 1) {
            if (value == "Disable") {
                new_v = "<option value='Disable' >Disable</option>";
            }
            else if (value == "Enable") {
                new_v = "<option value='Enable' >Enable</option>"
            }
            var full = html + "" + new_v;
            $(".statusButton").html(full);
            k = 2;
        }
    });
});

Он работает на JSFiddle, но когда я пытаюсь интегрировать его на свой веб-сайт, он не читает его, даже просто журнал консоли. Что я делаю неправильно?

Answer 1

Я не уверен, что именно не так, но я думаю, что лучше использовать метод добавления jQuery (https://api.jquery.com/append/).

Подумайте:

...
$(".statusButton").on('focus', function () {
    var value = "Disable";
    var new_v = "";
    var $statusButton = $(".statusButton");
    if(k == 1){
        if(value == "Disable")
        {
            $statusButton.append("<option value='Disable' >Disable</option>");
        }
        else if(value == "Enable")
       {
           $statusButton.append("<option value='Enable' >Enable</option>")
       }
...

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

Answer 2

Это короткий ответ без создания слишком большого количества переменных.

$(document).ready(function() {
  var k = 1
  $(".statusButton").on('focus', function() {
    var value = "Disable";
    if (k == 1) {
      if (value == "Disable") {
        $(".statusButton").append("<option value='Disable' >Disable</option>");
      } else if (value == "Enable") {
        $(".statusButton").append("<option value='Enable' >Enable</option>")
      }
      k = 2;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="statusButtonChange statusButton " data-value="49506">
  <option value="0" selected=""></option>
  <option value="1">Close</option>
  <option value="2" disabled="" style="color:grey;">Taken</option>
</select>