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>');

... 还有更多，但它遵循相同的代码不同的值。

结果如下，在if语句之上（只是一行），

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

现在点击按钮，功能changePage（）运行，而我想要的只是......

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

假设他们选择并选择两者。 Result2不起作用。我想是因为我正在追加它，但我将如何解决这个问题。因此，当我单击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，修复它应该没问题

<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

来大量改进脚本

追加后获取选择值

2 个答案: