Question

我有一个脚本，它使用多维数组通过引用为我提供转换：

DirtBlock

当在html中更改下拉列表时，会获得该值并填充第二个下拉列表 - 下面的代码（此方法有效）并且日志符合预期。

var sizechanges = Array(
    Array (6,8,10,12), //type A
    Array(4,6,8,10)); //typeb

所以上面的工作。我遇到问题的地方是访问html（）方法添加的内容。我的代码如下：

$(document).ready(function(){
    $("#size0").on('change',function(){
        var b0 = $('#size0').val();
        var i = sizechanges[b0].length;
        var blohtmml = ("<option>PLEASE SELECT</option>");
        x = 0;
        while ( x < i ) { 
            blohtmml += ("<option value='" + x + "'>" + sizechanges[b0][x] + "</option>") ;
            console.log(sizechanges[b0][x]); works
            x++;
        }
        $('#size1').html(blohtmml); //works
    });
});

我可以看到源未更新，并想知道如何访问添加的内容。我读了很多关于追加的问题，但在html（）上找不到任何东西。我猜测解决方案是相似的，但不明白为什么.on方法没有找到新的HTML。

最后，我没有得到任何b2的结果，这是一个不受html插入影响的下拉列表。

我的HTML在下面添加了完整性。

$("#butt").on('click',function(){ //button id is #butt
    var b1 = $('#size1').val();//size dropdown
    var b2 = $('#size2').val();// country to dropdown
    console.log(b1,b2); //nothing in log
    var result = sizechanges[b2][b1];
    console.log(result); //nothing in log
});

非常感谢任何帮助解决我的问题

Answer 1

变化：

<select class="size2" id="size23">`

为：

<select class="size2" id="size2">

你可能会有更好的运气。

$(document).ready(function(){
    var sizechanges = Array(
        Array (6,8,10,12), //type A
        Array(4,6,8,10)); //typeb
  
    $("#size0").on('change',function(){
        var b0 = $('#size0').val();
        var i = sizechanges[b0].length;
        var blohtmml = ("<option>PLEASE SELECT</option>");
        x = 0;
        while ( x < i ) { 
            blohtmml += ("<option value='" + x + "'>" + sizechanges[b0][x] + "</option>") ;
            console.log(sizechanges[b0][x]); //works
            x++;
        }
        $('#size1').html(blohtmml); //works
    });
    $("#butt").on('click',function(){ //button id is #butt
        var b1 = $('#size1').val();//size dropdown
        var b2 = $('#size2').val();// country to dropdown
        console.log(b1,b2); //nothing in log
        var result = sizechanges[b2][b1];
        console.log(result); //nothing in log
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
            <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<form><label>I AM IN</LABEL><select id="size0" class="size0">
                            <option>PLEASE SELECT
                            </option>
                            <option value="1">
                                UK
                            </option>
                            <option value="0">
                                US
                            </option>


                </select><br>

                <label>size to convert </label>
                <select id="size1" class="size1">
                            <option>PLEASE SELECT
                            </option>


                </select><br>
                <label>IS IN </label>
                <select class="size2" id="size2">
                  <option>PLEASE SELECT</option>
                            <option value="1"> UK</option>
  <option value="0"> US</option>
</select><br>


         <button id="butt" type="button" >GET SIZE</button>

            </form>
            <div id="blobla"></div>
            <div id="blobla2"></div>

使用.html（）添加添加的jquery元素

1 个答案: