Выпадающий текст не отображается после получения значения

Question

Я хотел бы получить значение раскрывающегося списка параметров при запуске страницы без ее выбора. Я уже успешно получил значение, но текст не отображался в раскрывающемся интерфейсе.

Вот что я делаю, чтобы получить значение,

   $("#firstDropdown").val(function () {
            getCode($(this).val());
        });

Answer 1

Что я знаю, так это то, что в раскрывающемся списке нет события val, есть событие .change.

Так измените код, как показано ниже:

$("#firstDropdown").change(function () { //.change() event
   //Use $("#firstDropdown option:selected").text() to get selected value text
    getCode($("#firstDropdown option:selected").text());
});

Работает образец:

$("#firstDropdown").change(function () {
  getCode($("#firstDropdown option:selected").text());
});

function getCode(selectedText){
  console.log(selectedText);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="firstDropdown">
  <option value = "1">One</option>
  <option value = "2">Two</option>
  <option value = "3">Three</option>
</select>

Answer 2

Исходя из вашего вопроса, «текст не отображался в выпадающем интерфейсе». Используйте выбранный параметр, чтобы отобразить параметр раскрывающегося списка по умолчанию.

<select name = "dropdown">
        <option value = "1">1</option>
        <option value = "2" selected >2</option>
        <option value = "3">3</option>
     </select>

И для входа JS,

getCode($("#firstDropdown option:selected").text();

Answer 3

Этот сделает работу

getSelectText('cboSelector');

$('#cboSelector').change(function(){
  getSelectText('cboSelector');
});

function getSelectText(cbo) {
  var val = $('#'+cbo).val();
  console.log($('#'+cbo+' option[value="'+val+'"]').html());
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="cboSelector">
        <option value="0"></option>
        <option value="1">One</option>
        <option value="2" selected>Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
      </select>