Select ID is missing

Question

I'm trying to get the Value or Text of my Select Options but for some reason all the methods I tried won't show me the ID of the Select. I think that because I'm executing the script before adding the Select in the DOM. Here is my code:-

JS file:

var myimgHTML2="" ;
var myString="";
myString +="<select id='sizesSelect'></select>";
myimgHTML2=myString;
    return myimgHTML2;

JS (class) File:

$("#myrow").append(myHTML);

HTML File:

<body>

    <div id="myrow" class="row"> 
        <!-- Row Start -->
        <!-- Row End -->
    </div>

    <table width="100%">
        <tr>
            <td colspan="2" align="center">
               <a class="btn btn-primary btn-lg" id="back_btn" style="width:100px" align="center" onclick="stack_func()" href="#" role="button">Back</a>
            </td>
            <td colspan="2" align="center">
                <a class="btn btn-success btn-lg" id="submit_btn" style="width:200px" align="center" role="button">Select This Theme</a>
            </td>
        </tr>
    </table>

    </div>

    <script type="text/javascript">


        document.getElementById('back_btn').style.display='none';
        document.getElementById('submit_btn').style.display='none';
        var myPMS = new PMS();

        myPMS.sendToServer('path1_1');

        var uniqueID=[];
        uniqueID.push('path1');

        function callToServer(id)
        {
            var res = id.split("_");
            if (id=="path1")
            {
                document.getElementById('back_btn').style.display='none';
            }
            else if(res[0]=="themeId")
            {
                document.getElementById('submit_btn').style.display='block';
            }
            else 
            {
                document.getElementById('back_btn').style.display='block';
                document.getElementById('submit_btn').style.display='none'; 
            }

            uniqueID.push(id);
            myPMS.sendToServer(id);
        }

     }
    </script>

</body>

How I called for my Select ID (JS):

var selector = document.getElementById("sizesSelect");
var myvalue = selector[selector.selectedIndex].value;
console.log (myvalue);

and tried adding my ID like that with no result.

#sizesSelect

ALSO, I noted in this post that they have selectedIndex in the options while that didn't show for me in my Select options.

"I think that because I'm executing the script before adding the Select in the DOM" - have you tried to do if after? — Alexandr Lazarev, Oct 01 '15 at 07:43
Read about document.ready and let us know where in page you have javascript and when it gets executed. — Adil, Oct 01 '15 at 07:43
@LazarevAlexandr I added the needed part of the HTML file, the way it works I guess difficult, but at the same time I'm getting the Buttons ID with no issue. — Sadiq Jaffer, Oct 01 '15 at 07:49
@Adil It works like that 1) Adding the HTML code in JS variable 2) Return the variable to the HTML and print the block. So I think I need of execute the script after the Returning not during my addition to the code :) — Sadiq Jaffer, Oct 01 '15 at 07:52

score 1 · Accepted Answer · answered Oct 01 '15 at 07:52

1

And make sure select tag having a option tag must be selected.

Or

if you wants to get value on change than use on method like this:

$(document).on('change', '#sizesSelect', function(){
    var value = $(this).val();
    alert(value);
});

answered Oct 01 '15 at 07:52

Yogesh Shakya

355
3
15

That's great now I can get the value it seems that what I was seeking for. Thanks a lot. – Sadiq Jaffer Oct 01 '15 at 07:56

Select ID is missing

1 Answers1