Получение значения выбора после добавления

Question

Это для javascript и jquery.

У меня есть в моем теле ...

<select id="option1_select" name="courseCodeSelectName"> 
     <option></option>      
     <option>Word1</option> 
     <option>Word2</option> 
    </select> 
    <script> 
     $("select").change(function() { 
      functionLoadOpt2() }).trigger("change"); 
    </script> 

    <select id="option2_select" name="courseNumSelectName"> 
     <option></option> 
    </select> 
    <button onclick="changePage()">Load Textbook Page!</button> 

Как мы видим выше, веб-страница имеет 2 выбора окна и кнопки. В зависимости от того, что вы выбрали в первом окне выбора, загрузите то, что находится во втором, используя функцию functionLoadOpt2, расположенную выше в моем коде.

if (result == "Word1") {   
    $("#option2_select").append('<option>Letter1</option>'); 

... Существует больше, но это следует так же код разные значения.

Результат следующий, выше, если заявление (только строку вверх),

var result = (document.getElementById('option1_select').value); 

теперь на кнопку мыши, функция changePage() работает, и все, что я хочу ...

var result = (document.getElementById('option1_select').value); 
var result2= (document.getElementById('option2_select').value); 

Предположим, что они выбрали и вариант для обоих. Результат 2 не работает. Я бы предположил, потому что я добавляю его, но как бы я об этом поработал. Поэтому, когда я нажимаю changePage(), я получаю выбранное значение option1_select и option2_select.

functionLoadOpt2:

function functionLoadOpt2(){ 

    var opt1Val = (document.getElementById('option1_select').value); 


    $("#option2_select").find('option').remove().end().append('<option></option>'); 

    if (opt1Val == "Word1") { 

     $("#option2_select").append('<option>Letter1</option>'); 
     $("#option2_select").append('<option>Letter2</option>'); 
     $("#option2_select").append('<option>Letter3</option>'); 
     $("#option2_select").append('<option>Letter4</option>'); 
     $("#option2_select").append('<option>Letter5</option>'); 
    }else if (opt1Val == "Word2") { 

     $("#option2_select").append('<option>Letter3</option>');//they have similar ones in some cases 
     $("#option2_select").append('<option>Letter6</option>'); 
     $("#option2_select").append('<option>Letter7</option>'); 
     $("#option2_select").append('<option>Letter8</option>'); 
     $("#option2_select").append('<option>Letter9</option>'); 
     $("#option2_select").append('<option>Letter10</option>'); 
     $("#option2_select").append('<option>Letter11</option>'); 
     $("#option2_select").append('<option>Letter12</option>'); 
     $("#option2_select").append('<option>Letter13</option>'); 
     $("#option2_select").append('<option>Letter14</option>'); 
     $("#option2_select").append('<option>Letter15</option>'); 
     $("#option2_select").append('<option>Letter16</option>'); 
     $("#option2_select").append('<option>Letter17</option>'); 

//this works 

    }  


} 

Answer 1

использовать JQuery, чтобы получить и установить значение <select> с .val()

Answer 2

Оба селектов элементы имеют один и тот же идентификатор, это исправить тем она должна быть тонкой

<select id="option1_select" name="courseCodeSelectName"> 
    <option></option> 
    <option>Word1</option> 
    <option>Word2</option> 
</select> 
<select id="option2_select" name="courseNumSelectName"> 
    <option></option> 
</select> 
<button onclick="changePage()">Load Textbook Page!</button> 

Демонстрация: Fiddle

Примечание. Вы можете улучшить сценарий много, используя правильные конструкции jQuery, like this