HTML select options: setting the selected attribute to an input element has no effect












0















What I did is



var select  = document.createElement("select");
var option1 = document.createElement("option");
var option2 = document.createElement("option");
select.appendChild(option);
select.appendChild(option);
// Set values and texts here.
option2.selected = true;


The last line of code above has no effect, I still get option1 as the selected option. What am I missing here?










share|improve this question



























    0















    What I did is



    var select  = document.createElement("select");
    var option1 = document.createElement("option");
    var option2 = document.createElement("option");
    select.appendChild(option);
    select.appendChild(option);
    // Set values and texts here.
    option2.selected = true;


    The last line of code above has no effect, I still get option1 as the selected option. What am I missing here?










    share|improve this question

























      0












      0








      0








      What I did is



      var select  = document.createElement("select");
      var option1 = document.createElement("option");
      var option2 = document.createElement("option");
      select.appendChild(option);
      select.appendChild(option);
      // Set values and texts here.
      option2.selected = true;


      The last line of code above has no effect, I still get option1 as the selected option. What am I missing here?










      share|improve this question














      What I did is



      var select  = document.createElement("select");
      var option1 = document.createElement("option");
      var option2 = document.createElement("option");
      select.appendChild(option);
      select.appendChild(option);
      // Set values and texts here.
      option2.selected = true;


      The last line of code above has no effect, I still get option1 as the selected option. What am I missing here?







      javascript html






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 30 '18 at 5:16









      coderoddecoderodde

      6872919




      6872919
























          3 Answers
          3






          active

          oldest

          votes


















          0














          You need to append the select to the body. It also helps to add some text to the options:






          var select  = document.createElement("select");
          var option1 = document.createElement("option");
          var option2 = document.createElement("option");
          var option3 = document.createElement("option");
          document.body.appendChild(select);
          option1.innerText = 'One';
          option2.innerText = 'Two';
          option3.innerText = 'Three';
          select.appendChild(option1);
          select.appendChild(option2);
          select.appendChild(option3);
          option2.selected = true;





          I also added a third option to show that option2.selected = true is respected






          share|improve this answer































            0














            Add the value & innerHTML property to the select. And also fix the typo






            var select = document.createElement("select");
            var option1 = document.createElement("option");
            var option2 = document.createElement("option");
            option1.value = "1";
            option1.innerHTML = "1";
            option2.value = "2";
            option2.innerHTML = "2";
            option2.selected = true;

            select.appendChild(option1);
            select.appendChild(option2);
            document.getElementById('test').appendChild(select)

            <div id='test'></div>








            share|improve this answer































              0














              you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.



                  var myDiv = document.getElementById("myDiv");

              //Create array of options to be added
              var array = ["Volvo","Saab","Mercades","Audi"];

              //Create and append select list
              var selectList = document.createElement("select");
              selectList.setAttribute("id", "mySelect");
              myDiv.appendChild(selectList);

              //Create and append the options
              for (var i = 0; i < array.length; i++) {
              var option = document.createElement("option");
              option.setAttribute("value", array[i]);
              option.text = array[i];
              selectList.appendChild(option);
              }
              selectList[2].selected =1;





              share|improve this answer























                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });














                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53975437%2fhtml-select-options-setting-the-selected-attribute-to-an-input-element-has-no-e%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                0














                You need to append the select to the body. It also helps to add some text to the options:






                var select  = document.createElement("select");
                var option1 = document.createElement("option");
                var option2 = document.createElement("option");
                var option3 = document.createElement("option");
                document.body.appendChild(select);
                option1.innerText = 'One';
                option2.innerText = 'Two';
                option3.innerText = 'Three';
                select.appendChild(option1);
                select.appendChild(option2);
                select.appendChild(option3);
                option2.selected = true;





                I also added a third option to show that option2.selected = true is respected






                share|improve this answer




























                  0














                  You need to append the select to the body. It also helps to add some text to the options:






                  var select  = document.createElement("select");
                  var option1 = document.createElement("option");
                  var option2 = document.createElement("option");
                  var option3 = document.createElement("option");
                  document.body.appendChild(select);
                  option1.innerText = 'One';
                  option2.innerText = 'Two';
                  option3.innerText = 'Three';
                  select.appendChild(option1);
                  select.appendChild(option2);
                  select.appendChild(option3);
                  option2.selected = true;





                  I also added a third option to show that option2.selected = true is respected






                  share|improve this answer


























                    0












                    0








                    0







                    You need to append the select to the body. It also helps to add some text to the options:






                    var select  = document.createElement("select");
                    var option1 = document.createElement("option");
                    var option2 = document.createElement("option");
                    var option3 = document.createElement("option");
                    document.body.appendChild(select);
                    option1.innerText = 'One';
                    option2.innerText = 'Two';
                    option3.innerText = 'Three';
                    select.appendChild(option1);
                    select.appendChild(option2);
                    select.appendChild(option3);
                    option2.selected = true;





                    I also added a third option to show that option2.selected = true is respected






                    share|improve this answer













                    You need to append the select to the body. It also helps to add some text to the options:






                    var select  = document.createElement("select");
                    var option1 = document.createElement("option");
                    var option2 = document.createElement("option");
                    var option3 = document.createElement("option");
                    document.body.appendChild(select);
                    option1.innerText = 'One';
                    option2.innerText = 'Two';
                    option3.innerText = 'Three';
                    select.appendChild(option1);
                    select.appendChild(option2);
                    select.appendChild(option3);
                    option2.selected = true;





                    I also added a third option to show that option2.selected = true is respected






                    var select  = document.createElement("select");
                    var option1 = document.createElement("option");
                    var option2 = document.createElement("option");
                    var option3 = document.createElement("option");
                    document.body.appendChild(select);
                    option1.innerText = 'One';
                    option2.innerText = 'Two';
                    option3.innerText = 'Three';
                    select.appendChild(option1);
                    select.appendChild(option2);
                    select.appendChild(option3);
                    option2.selected = true;





                    var select  = document.createElement("select");
                    var option1 = document.createElement("option");
                    var option2 = document.createElement("option");
                    var option3 = document.createElement("option");
                    document.body.appendChild(select);
                    option1.innerText = 'One';
                    option2.innerText = 'Two';
                    option3.innerText = 'Three';
                    select.appendChild(option1);
                    select.appendChild(option2);
                    select.appendChild(option3);
                    option2.selected = true;






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Dec 30 '18 at 5:20









                    ic3b3rgic3b3rg

                    10.7k42045




                    10.7k42045

























                        0














                        Add the value & innerHTML property to the select. And also fix the typo






                        var select = document.createElement("select");
                        var option1 = document.createElement("option");
                        var option2 = document.createElement("option");
                        option1.value = "1";
                        option1.innerHTML = "1";
                        option2.value = "2";
                        option2.innerHTML = "2";
                        option2.selected = true;

                        select.appendChild(option1);
                        select.appendChild(option2);
                        document.getElementById('test').appendChild(select)

                        <div id='test'></div>








                        share|improve this answer




























                          0














                          Add the value & innerHTML property to the select. And also fix the typo






                          var select = document.createElement("select");
                          var option1 = document.createElement("option");
                          var option2 = document.createElement("option");
                          option1.value = "1";
                          option1.innerHTML = "1";
                          option2.value = "2";
                          option2.innerHTML = "2";
                          option2.selected = true;

                          select.appendChild(option1);
                          select.appendChild(option2);
                          document.getElementById('test').appendChild(select)

                          <div id='test'></div>








                          share|improve this answer


























                            0












                            0








                            0







                            Add the value & innerHTML property to the select. And also fix the typo






                            var select = document.createElement("select");
                            var option1 = document.createElement("option");
                            var option2 = document.createElement("option");
                            option1.value = "1";
                            option1.innerHTML = "1";
                            option2.value = "2";
                            option2.innerHTML = "2";
                            option2.selected = true;

                            select.appendChild(option1);
                            select.appendChild(option2);
                            document.getElementById('test').appendChild(select)

                            <div id='test'></div>








                            share|improve this answer













                            Add the value & innerHTML property to the select. And also fix the typo






                            var select = document.createElement("select");
                            var option1 = document.createElement("option");
                            var option2 = document.createElement("option");
                            option1.value = "1";
                            option1.innerHTML = "1";
                            option2.value = "2";
                            option2.innerHTML = "2";
                            option2.selected = true;

                            select.appendChild(option1);
                            select.appendChild(option2);
                            document.getElementById('test').appendChild(select)

                            <div id='test'></div>








                            var select = document.createElement("select");
                            var option1 = document.createElement("option");
                            var option2 = document.createElement("option");
                            option1.value = "1";
                            option1.innerHTML = "1";
                            option2.value = "2";
                            option2.innerHTML = "2";
                            option2.selected = true;

                            select.appendChild(option1);
                            select.appendChild(option2);
                            document.getElementById('test').appendChild(select)

                            <div id='test'></div>





                            var select = document.createElement("select");
                            var option1 = document.createElement("option");
                            var option2 = document.createElement("option");
                            option1.value = "1";
                            option1.innerHTML = "1";
                            option2.value = "2";
                            option2.innerHTML = "2";
                            option2.selected = true;

                            select.appendChild(option1);
                            select.appendChild(option2);
                            document.getElementById('test').appendChild(select)

                            <div id='test'></div>






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Dec 30 '18 at 5:22









                            brkbrk

                            26.4k31940




                            26.4k31940























                                0














                                you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.



                                    var myDiv = document.getElementById("myDiv");

                                //Create array of options to be added
                                var array = ["Volvo","Saab","Mercades","Audi"];

                                //Create and append select list
                                var selectList = document.createElement("select");
                                selectList.setAttribute("id", "mySelect");
                                myDiv.appendChild(selectList);

                                //Create and append the options
                                for (var i = 0; i < array.length; i++) {
                                var option = document.createElement("option");
                                option.setAttribute("value", array[i]);
                                option.text = array[i];
                                selectList.appendChild(option);
                                }
                                selectList[2].selected =1;





                                share|improve this answer




























                                  0














                                  you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.



                                      var myDiv = document.getElementById("myDiv");

                                  //Create array of options to be added
                                  var array = ["Volvo","Saab","Mercades","Audi"];

                                  //Create and append select list
                                  var selectList = document.createElement("select");
                                  selectList.setAttribute("id", "mySelect");
                                  myDiv.appendChild(selectList);

                                  //Create and append the options
                                  for (var i = 0; i < array.length; i++) {
                                  var option = document.createElement("option");
                                  option.setAttribute("value", array[i]);
                                  option.text = array[i];
                                  selectList.appendChild(option);
                                  }
                                  selectList[2].selected =1;





                                  share|improve this answer


























                                    0












                                    0








                                    0







                                    you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.



                                        var myDiv = document.getElementById("myDiv");

                                    //Create array of options to be added
                                    var array = ["Volvo","Saab","Mercades","Audi"];

                                    //Create and append select list
                                    var selectList = document.createElement("select");
                                    selectList.setAttribute("id", "mySelect");
                                    myDiv.appendChild(selectList);

                                    //Create and append the options
                                    for (var i = 0; i < array.length; i++) {
                                    var option = document.createElement("option");
                                    option.setAttribute("value", array[i]);
                                    option.text = array[i];
                                    selectList.appendChild(option);
                                    }
                                    selectList[2].selected =1;





                                    share|improve this answer













                                    you need to add "select[1].selected =1;" into your code, please check the following code. this code worked for me.



                                        var myDiv = document.getElementById("myDiv");

                                    //Create array of options to be added
                                    var array = ["Volvo","Saab","Mercades","Audi"];

                                    //Create and append select list
                                    var selectList = document.createElement("select");
                                    selectList.setAttribute("id", "mySelect");
                                    myDiv.appendChild(selectList);

                                    //Create and append the options
                                    for (var i = 0; i < array.length; i++) {
                                    var option = document.createElement("option");
                                    option.setAttribute("value", array[i]);
                                    option.text = array[i];
                                    selectList.appendChild(option);
                                    }
                                    selectList[2].selected =1;






                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Dec 30 '18 at 5:44









                                    Fatemeh Khosravi FarsaniFatemeh Khosravi Farsani

                                    339




                                    339






























                                        draft saved

                                        draft discarded




















































                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53975437%2fhtml-select-options-setting-the-selected-attribute-to-an-input-element-has-no-e%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Monofisismo

                                        Angular Downloading a file using contenturl with Basic Authentication

                                        Olmecas