Select the option based on value












1















M trying to do some DOM manipulation where I want to select the dropdown option based on the value :



$(this).parent().parent().find("select[name*='weight_prefix']").each(function() {
$(this)[0].selectedIndex = 0;
});


Here it's selecting based on the index, How do I do it based on value, for example
select the option where value is '+'



   <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
<option value="=">=</option>
<option value="+">+</option>
<option value="-" selected="selected">-</option>
</select>









share|improve this question





























    1















    M trying to do some DOM manipulation where I want to select the dropdown option based on the value :



    $(this).parent().parent().find("select[name*='weight_prefix']").each(function() {
    $(this)[0].selectedIndex = 0;
    });


    Here it's selecting based on the index, How do I do it based on value, for example
    select the option where value is '+'



       <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
    <option value="=">=</option>
    <option value="+">+</option>
    <option value="-" selected="selected">-</option>
    </select>









    share|improve this question



























      1












      1








      1








      M trying to do some DOM manipulation where I want to select the dropdown option based on the value :



      $(this).parent().parent().find("select[name*='weight_prefix']").each(function() {
      $(this)[0].selectedIndex = 0;
      });


      Here it's selecting based on the index, How do I do it based on value, for example
      select the option where value is '+'



         <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
      <option value="=">=</option>
      <option value="+">+</option>
      <option value="-" selected="selected">-</option>
      </select>









      share|improve this question
















      M trying to do some DOM manipulation where I want to select the dropdown option based on the value :



      $(this).parent().parent().find("select[name*='weight_prefix']").each(function() {
      $(this)[0].selectedIndex = 0;
      });


      Here it's selecting based on the index, How do I do it based on value, for example
      select the option where value is '+'



         <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
      <option value="=">=</option>
      <option value="+">+</option>
      <option value="-" selected="selected">-</option>
      </select>






      jquery






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 28 '18 at 14:47









      connexo

      22.8k83762




      22.8k83762










      asked Nov 25 '18 at 20:41









      H SimlaH Simla

      83




      83
























          2 Answers
          2






          active

          oldest

          votes


















          0














          You could use val() :






          $("select[name*='weight_prefix']").val("=");

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
          <option value="=">=</option>
          <option value="+">+</option>
          <option value="-" selected="selected">-</option>
          </select>








          share|improve this answer

































            0














            You don't need any jQuery for this. Just go with plain simple vanilla Javascript and set the value of the select element:






            document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

            <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
            <option value="=">=</option>
            <option value="+">+</option>
            <option value="-" selected="selected">-</option>
            </select>





            If you have more than one (which your selector and using each() suggests), here you go:






            [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

            <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
            <option value="=">=</option>
            <option value="+">+</option>
            <option value="-" selected="selected">-</option>
            </select>


            <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
            <option value="=">=</option>
            <option value="+">+</option>
            <option value="-" selected="selected">-</option>
            </select>

            <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
            <option value="=">=</option>
            <option value="+" selected="selected">+</option>
            <option value="-">-</option>
            </select>







            • document.querySelectorAll('[name*="[weight_prefix]"') gets you a NodeList (similar to an Array) containing the matched select elements.


            • [...document.querySelectorAll('[name*="[weight_prefix]"')] pulls your NodeList members into an actual array (this is called rest spread, a feature introduced with ECMAScript 2015 (also known as ES6)), so you can use the Array-method forEach() on the NodeList to iterate over the list.

            • You pass an arrow function to forEach(): x => x.value = '=' (which is almost the same as writing function(x) { x.value = '=' }).






            share|improve this answer


























            • Great Answer.........

              – H Simla
              Nov 25 '18 at 21:14











            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%2f53471744%2fselect-the-option-based-on-value%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            You could use val() :






            $("select[name*='weight_prefix']").val("=");

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
            <option value="=">=</option>
            <option value="+">+</option>
            <option value="-" selected="selected">-</option>
            </select>








            share|improve this answer






























              0














              You could use val() :






              $("select[name*='weight_prefix']").val("=");

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
              <option value="=">=</option>
              <option value="+">+</option>
              <option value="-" selected="selected">-</option>
              </select>








              share|improve this answer




























                0












                0








                0







                You could use val() :






                $("select[name*='weight_prefix']").val("=");

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                <option value="=">=</option>
                <option value="+">+</option>
                <option value="-" selected="selected">-</option>
                </select>








                share|improve this answer















                You could use val() :






                $("select[name*='weight_prefix']").val("=");

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                <option value="=">=</option>
                <option value="+">+</option>
                <option value="-" selected="selected">-</option>
                </select>








                $("select[name*='weight_prefix']").val("=");

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                <option value="=">=</option>
                <option value="+">+</option>
                <option value="-" selected="selected">-</option>
                </select>





                $("select[name*='weight_prefix']").val("=");

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                <option value="=">=</option>
                <option value="+">+</option>
                <option value="-" selected="selected">-</option>
                </select>






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 25 '18 at 21:01

























                answered Nov 25 '18 at 20:43









                Zakaria AcharkiZakaria Acharki

                55.8k134471




                55.8k134471

























                    0














                    You don't need any jQuery for this. Just go with plain simple vanilla Javascript and set the value of the select element:






                    document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>





                    If you have more than one (which your selector and using each() suggests), here you go:






                    [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>


                    <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>

                    <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+" selected="selected">+</option>
                    <option value="-">-</option>
                    </select>







                    • document.querySelectorAll('[name*="[weight_prefix]"') gets you a NodeList (similar to an Array) containing the matched select elements.


                    • [...document.querySelectorAll('[name*="[weight_prefix]"')] pulls your NodeList members into an actual array (this is called rest spread, a feature introduced with ECMAScript 2015 (also known as ES6)), so you can use the Array-method forEach() on the NodeList to iterate over the list.

                    • You pass an arrow function to forEach(): x => x.value = '=' (which is almost the same as writing function(x) { x.value = '=' }).






                    share|improve this answer


























                    • Great Answer.........

                      – H Simla
                      Nov 25 '18 at 21:14
















                    0














                    You don't need any jQuery for this. Just go with plain simple vanilla Javascript and set the value of the select element:






                    document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>





                    If you have more than one (which your selector and using each() suggests), here you go:






                    [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>


                    <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>

                    <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+" selected="selected">+</option>
                    <option value="-">-</option>
                    </select>







                    • document.querySelectorAll('[name*="[weight_prefix]"') gets you a NodeList (similar to an Array) containing the matched select elements.


                    • [...document.querySelectorAll('[name*="[weight_prefix]"')] pulls your NodeList members into an actual array (this is called rest spread, a feature introduced with ECMAScript 2015 (also known as ES6)), so you can use the Array-method forEach() on the NodeList to iterate over the list.

                    • You pass an arrow function to forEach(): x => x.value = '=' (which is almost the same as writing function(x) { x.value = '=' }).






                    share|improve this answer


























                    • Great Answer.........

                      – H Simla
                      Nov 25 '18 at 21:14














                    0












                    0








                    0







                    You don't need any jQuery for this. Just go with plain simple vanilla Javascript and set the value of the select element:






                    document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>





                    If you have more than one (which your selector and using each() suggests), here you go:






                    [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>


                    <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>

                    <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+" selected="selected">+</option>
                    <option value="-">-</option>
                    </select>







                    • document.querySelectorAll('[name*="[weight_prefix]"') gets you a NodeList (similar to an Array) containing the matched select elements.


                    • [...document.querySelectorAll('[name*="[weight_prefix]"')] pulls your NodeList members into an actual array (this is called rest spread, a feature introduced with ECMAScript 2015 (also known as ES6)), so you can use the Array-method forEach() on the NodeList to iterate over the list.

                    • You pass an arrow function to forEach(): x => x.value = '=' (which is almost the same as writing function(x) { x.value = '=' }).






                    share|improve this answer















                    You don't need any jQuery for this. Just go with plain simple vanilla Javascript and set the value of the select element:






                    document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>





                    If you have more than one (which your selector and using each() suggests), here you go:






                    [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>


                    <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>

                    <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+" selected="selected">+</option>
                    <option value="-">-</option>
                    </select>







                    • document.querySelectorAll('[name*="[weight_prefix]"') gets you a NodeList (similar to an Array) containing the matched select elements.


                    • [...document.querySelectorAll('[name*="[weight_prefix]"')] pulls your NodeList members into an actual array (this is called rest spread, a feature introduced with ECMAScript 2015 (also known as ES6)), so you can use the Array-method forEach() on the NodeList to iterate over the list.

                    • You pass an arrow function to forEach(): x => x.value = '=' (which is almost the same as writing function(x) { x.value = '=' }).






                    document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>





                    document.querySelector('[name="product_option[0][product_option_value][0][weight_prefix]"').value = "+";

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>





                    [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>


                    <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>

                    <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+" selected="selected">+</option>
                    <option value="-">-</option>
                    </select>





                    [...document.querySelectorAll('[name*="[weight_prefix]"')].forEach(x => x.value = "=")

                    <select name="product_option[0][product_option_value][0][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>


                    <select name="product_option[0][product_option_value][1][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+">+</option>
                    <option value="-" selected="selected">-</option>
                    </select>

                    <select name="product_option[0][product_option_value][2][weight_prefix]" class="form-control">
                    <option value="=">=</option>
                    <option value="+" selected="selected">+</option>
                    <option value="-">-</option>
                    </select>






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Nov 25 '18 at 21:02

























                    answered Nov 25 '18 at 20:55









                    connexoconnexo

                    22.8k83762




                    22.8k83762













                    • Great Answer.........

                      – H Simla
                      Nov 25 '18 at 21:14



















                    • Great Answer.........

                      – H Simla
                      Nov 25 '18 at 21:14

















                    Great Answer.........

                    – H Simla
                    Nov 25 '18 at 21:14





                    Great Answer.........

                    – H Simla
                    Nov 25 '18 at 21:14


















                    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%2f53471744%2fselect-the-option-based-on-value%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

                    Costa Masnaga

                    Fotorealismo

                    Sidney Franklin