CODEWITHSUNDEEP
javascriptjquery
fcreav
fcreav

Reputation: 360

Accessing added jquery elements added with .html()

I have a script that uses a multidimensional array to give me convertions by reference :

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

When a dropdown is changed in the html the value is obtained and a second dropdown is populated- code below (this works) and the log is as expected.

$(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
    });
});

So the above works. Where I am having trouble is accessing the content added by html() method. My code is below:

$("#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
});

I can see that the source is not updated and was wondering how I can access the added content. I read many questions on append but can not find anything on html(). I guessing the solutions are similar but do not understand why the .on method is not finding the new HTML.

Lastly I am not getting any result for b2 which is a dropdown unaffected by the html insertion.

My HTML is added below for completeness.

    <!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <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>
        </head>
        <body style="background-color: lightblue;">                        
            <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="size23">
                  <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> 
        </body>
    </html>

Any help solving my problem will be greatly appreciated

Upvotes: 0

Views: 53

Answers (1)

PeterKA
PeterKA

Reputation: 24638

Change:

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

to:

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

And you might have better luck.

$(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>

Upvotes: 1

Related Questions