jQuery - On button click trigger select option












2















Guys i want to ask how can i make a function in jQuery when i click a button to trigger a select of an option in a select menu.



Here is my HTML code:



<select id="target_menu" name="sort_by">
<option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>


The option which i want to be triggered as selected is created_at.



Here is the code of the button that i want when it is clicked to select option with id created_at of select menu with id target_menu:



<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>


When i click on the button -> Click Me! i want jQuery to force/trigger a selection of option with id created_at at select menu with id target_menu.



How my function triggerChange() must look like ?



So guys, how can i make it?










share|improve this question























  • stackoverflow.com/questions/4680075/…

    – errand
    Mar 23 '15 at 14:38
















2















Guys i want to ask how can i make a function in jQuery when i click a button to trigger a select of an option in a select menu.



Here is my HTML code:



<select id="target_menu" name="sort_by">
<option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>


The option which i want to be triggered as selected is created_at.



Here is the code of the button that i want when it is clicked to select option with id created_at of select menu with id target_menu:



<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>


When i click on the button -> Click Me! i want jQuery to force/trigger a selection of option with id created_at at select menu with id target_menu.



How my function triggerChange() must look like ?



So guys, how can i make it?










share|improve this question























  • stackoverflow.com/questions/4680075/…

    – errand
    Mar 23 '15 at 14:38














2












2








2








Guys i want to ask how can i make a function in jQuery when i click a button to trigger a select of an option in a select menu.



Here is my HTML code:



<select id="target_menu" name="sort_by">
<option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>


The option which i want to be triggered as selected is created_at.



Here is the code of the button that i want when it is clicked to select option with id created_at of select menu with id target_menu:



<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>


When i click on the button -> Click Me! i want jQuery to force/trigger a selection of option with id created_at at select menu with id target_menu.



How my function triggerChange() must look like ?



So guys, how can i make it?










share|improve this question














Guys i want to ask how can i make a function in jQuery when i click a button to trigger a select of an option in a select menu.



Here is my HTML code:



<select id="target_menu" name="sort_by">
<option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>


The option which i want to be triggered as selected is created_at.



Here is the code of the button that i want when it is clicked to select option with id created_at of select menu with id target_menu:



<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>


When i click on the button -> Click Me! i want jQuery to force/trigger a selection of option with id created_at at select menu with id target_menu.



How my function triggerChange() must look like ?



So guys, how can i make it?







javascript jquery html






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 23 '15 at 14:30









Venelin VasilevVenelin Vasilev

94832549




94832549













  • stackoverflow.com/questions/4680075/…

    – errand
    Mar 23 '15 at 14:38



















  • stackoverflow.com/questions/4680075/…

    – errand
    Mar 23 '15 at 14:38

















stackoverflow.com/questions/4680075/…

– errand
Mar 23 '15 at 14:38





stackoverflow.com/questions/4680075/…

– errand
Mar 23 '15 at 14:38












6 Answers
6






active

oldest

votes


















3














Try this function:



 function triggerChange(){
$("#target_menu").val($("#target_menu #created_at" ).val());
$('#target_menu').trigger('change');
}





share|improve this answer


























  • Okey but does it change and select the option with id created_at ?

    – Venelin Vasilev
    Mar 23 '15 at 14:41











  • I have updated the ans. according to your requirements

    – PHP Worm...
    Mar 23 '15 at 14:48











  • What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

    – Cosmin
    Mar 23 '15 at 15:09











  • Thanks @Kosmo I have modified the Answer. :)

    – PHP Worm...
    Mar 24 '15 at 6:37



















2

















function triggerChange()
{
$("#target_menu").val($("#created_at").val());
}

<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<select id="target_menu" name="sort_by">
<option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
<option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
<option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
<option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
<option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
</select>

<button onclick="triggerChange()" class="FirstFilter">
Click me!
</button>





Here is an answer to your question.



function triggerChange()
{
$("#target_menu").val("created_at");
}





share|improve this answer

































    1














    There are few ways of doing it. One is below. A piece of advise is that do not use inline event handlers!






    $("button").on("click", function() {
    $("#target_menu option").filter(function(opt, el) {
    return el.id === 'created_at' && $(el)
    }).prop("selected", true);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select id="target_menu" name="sort_by">
    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
    </select>

    <button class="FirstFilter">
    Click me!
    </button>








    share|improve this answer

































      0














      Use this



      function triggerChange(){    
      $("#target_menu").eq(4).prop("selected","selected");
      }





      share|improve this answer































        0














        as you have an id applied to each option you can target that id then use the .prop() method.



        $(document).ready(function(){
        $(".firstFilter").click(function(){
        var id = $("#created_at").prop("selected","selected");
        });
        });





        share|improve this answer

































          -1














          I made this fiddle for you



          Fiddle



          First step is to get value from element with id created_at:



          var wantedValue= $('#created_at').attr('value');


          And next, you need to set selected value for your select element:



          $('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
          // you can also call .trigger() - without 'change' keyword


          Explanation about why you need to trigger .change HERE




          For select boxes, checkboxes, and radio buttons, the event is fired
          immediately when the user makes a selection with the mouse, but for
          the other element types the event is deferred until the element loses
          focus.




          Update ( thanks LShetty )



          $('.FirstFilter').click(function(){
          $("#position").removeAttr("selected");
          $("#created_at").attr('selected','selected');
          });





          share|improve this answer


























          • Why trigger change when there is no capture?

            – lshettyl
            Mar 23 '15 at 15:02











          • Before giving -1 search : stackoverflow.com/questions/4672505/…

            – Cosmin
            Mar 23 '15 at 15:06






          • 1





            Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

            – lshettyl
            Mar 23 '15 at 15:12













          • Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

            – Cosmin
            Mar 23 '15 at 15:19











          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%2f29212870%2fjquery-on-button-click-trigger-select-option%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          6 Answers
          6






          active

          oldest

          votes








          6 Answers
          6






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          3














          Try this function:



           function triggerChange(){
          $("#target_menu").val($("#target_menu #created_at" ).val());
          $('#target_menu').trigger('change');
          }





          share|improve this answer


























          • Okey but does it change and select the option with id created_at ?

            – Venelin Vasilev
            Mar 23 '15 at 14:41











          • I have updated the ans. according to your requirements

            – PHP Worm...
            Mar 23 '15 at 14:48











          • What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

            – Cosmin
            Mar 23 '15 at 15:09











          • Thanks @Kosmo I have modified the Answer. :)

            – PHP Worm...
            Mar 24 '15 at 6:37
















          3














          Try this function:



           function triggerChange(){
          $("#target_menu").val($("#target_menu #created_at" ).val());
          $('#target_menu').trigger('change');
          }





          share|improve this answer


























          • Okey but does it change and select the option with id created_at ?

            – Venelin Vasilev
            Mar 23 '15 at 14:41











          • I have updated the ans. according to your requirements

            – PHP Worm...
            Mar 23 '15 at 14:48











          • What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

            – Cosmin
            Mar 23 '15 at 15:09











          • Thanks @Kosmo I have modified the Answer. :)

            – PHP Worm...
            Mar 24 '15 at 6:37














          3












          3








          3







          Try this function:



           function triggerChange(){
          $("#target_menu").val($("#target_menu #created_at" ).val());
          $('#target_menu').trigger('change');
          }





          share|improve this answer















          Try this function:



           function triggerChange(){
          $("#target_menu").val($("#target_menu #created_at" ).val());
          $('#target_menu').trigger('change');
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Mar 24 '15 at 6:36

























          answered Mar 23 '15 at 14:38









          PHP Worm...PHP Worm...

          3,30811238




          3,30811238













          • Okey but does it change and select the option with id created_at ?

            – Venelin Vasilev
            Mar 23 '15 at 14:41











          • I have updated the ans. according to your requirements

            – PHP Worm...
            Mar 23 '15 at 14:48











          • What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

            – Cosmin
            Mar 23 '15 at 15:09











          • Thanks @Kosmo I have modified the Answer. :)

            – PHP Worm...
            Mar 24 '15 at 6:37



















          • Okey but does it change and select the option with id created_at ?

            – Venelin Vasilev
            Mar 23 '15 at 14:41











          • I have updated the ans. according to your requirements

            – PHP Worm...
            Mar 23 '15 at 14:48











          • What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

            – Cosmin
            Mar 23 '15 at 15:09











          • Thanks @Kosmo I have modified the Answer. :)

            – PHP Worm...
            Mar 24 '15 at 6:37

















          Okey but does it change and select the option with id created_at ?

          – Venelin Vasilev
          Mar 23 '15 at 14:41





          Okey but does it change and select the option with id created_at ?

          – Venelin Vasilev
          Mar 23 '15 at 14:41













          I have updated the ans. according to your requirements

          – PHP Worm...
          Mar 23 '15 at 14:48





          I have updated the ans. according to your requirements

          – PHP Worm...
          Mar 23 '15 at 14:48













          What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

          – Cosmin
          Mar 23 '15 at 15:09





          What you wrote works only when you manually change the select element and no matter what a user will choose it will select option with 'created_at' id. He wanted to set 'created_at' as a selected option on button click. How your answer helps him ?

          – Cosmin
          Mar 23 '15 at 15:09













          Thanks @Kosmo I have modified the Answer. :)

          – PHP Worm...
          Mar 24 '15 at 6:37





          Thanks @Kosmo I have modified the Answer. :)

          – PHP Worm...
          Mar 24 '15 at 6:37













          2

















          function triggerChange()
          {
          $("#target_menu").val($("#created_at").val());
          }

          <script src="http://code.jquery.com/jquery-latest.min.js"
          type="text/javascript"></script>
          <select id="target_menu" name="sort_by">
          <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
          <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
          <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
          <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
          <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
          </select>

          <button onclick="triggerChange()" class="FirstFilter">
          Click me!
          </button>





          Here is an answer to your question.



          function triggerChange()
          {
          $("#target_menu").val("created_at");
          }





          share|improve this answer






























            2

















            function triggerChange()
            {
            $("#target_menu").val($("#created_at").val());
            }

            <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script>
            <select id="target_menu" name="sort_by">
            <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
            <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
            <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
            <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
            <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
            </select>

            <button onclick="triggerChange()" class="FirstFilter">
            Click me!
            </button>





            Here is an answer to your question.



            function triggerChange()
            {
            $("#target_menu").val("created_at");
            }





            share|improve this answer




























              2












              2








              2










              function triggerChange()
              {
              $("#target_menu").val($("#created_at").val());
              }

              <script src="http://code.jquery.com/jquery-latest.min.js"
              type="text/javascript"></script>
              <select id="target_menu" name="sort_by">
              <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
              <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
              <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
              <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
              <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
              </select>

              <button onclick="triggerChange()" class="FirstFilter">
              Click me!
              </button>





              Here is an answer to your question.



              function triggerChange()
              {
              $("#target_menu").val("created_at");
              }





              share|improve this answer


















              function triggerChange()
              {
              $("#target_menu").val($("#created_at").val());
              }

              <script src="http://code.jquery.com/jquery-latest.min.js"
              type="text/javascript"></script>
              <select id="target_menu" name="sort_by">
              <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
              <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
              <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
              <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
              <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
              </select>

              <button onclick="triggerChange()" class="FirstFilter">
              Click me!
              </button>





              Here is an answer to your question.



              function triggerChange()
              {
              $("#target_menu").val("created_at");
              }





              function triggerChange()
              {
              $("#target_menu").val($("#created_at").val());
              }

              <script src="http://code.jquery.com/jquery-latest.min.js"
              type="text/javascript"></script>
              <select id="target_menu" name="sort_by">
              <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
              <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
              <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
              <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
              <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
              </select>

              <button onclick="triggerChange()" class="FirstFilter">
              Click me!
              </button>





              function triggerChange()
              {
              $("#target_menu").val($("#created_at").val());
              }

              <script src="http://code.jquery.com/jquery-latest.min.js"
              type="text/javascript"></script>
              <select id="target_menu" name="sort_by">
              <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
              <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
              <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
              <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
              <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
              </select>

              <button onclick="triggerChange()" class="FirstFilter">
              Click me!
              </button>






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Nov 14 '18 at 7:33









              PrakashG

              615719




              615719










              answered Nov 14 '18 at 7:16









              Rahul RahatalRahul Rahatal

              758




              758























                  1














                  There are few ways of doing it. One is below. A piece of advise is that do not use inline event handlers!






                  $("button").on("click", function() {
                  $("#target_menu option").filter(function(opt, el) {
                  return el.id === 'created_at' && $(el)
                  }).prop("selected", true);
                  });

                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                  <select id="target_menu" name="sort_by">
                  <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
                  <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
                  <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
                  <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
                  <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
                  </select>

                  <button class="FirstFilter">
                  Click me!
                  </button>








                  share|improve this answer






























                    1














                    There are few ways of doing it. One is below. A piece of advise is that do not use inline event handlers!






                    $("button").on("click", function() {
                    $("#target_menu option").filter(function(opt, el) {
                    return el.id === 'created_at' && $(el)
                    }).prop("selected", true);
                    });

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <select id="target_menu" name="sort_by">
                    <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
                    <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
                    <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
                    <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
                    <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
                    </select>

                    <button class="FirstFilter">
                    Click me!
                    </button>








                    share|improve this answer




























                      1












                      1








                      1







                      There are few ways of doing it. One is below. A piece of advise is that do not use inline event handlers!






                      $("button").on("click", function() {
                      $("#target_menu option").filter(function(opt, el) {
                      return el.id === 'created_at' && $(el)
                      }).prop("selected", true);
                      });

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                      <select id="target_menu" name="sort_by">
                      <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
                      <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
                      <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
                      <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
                      <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
                      </select>

                      <button class="FirstFilter">
                      Click me!
                      </button>








                      share|improve this answer















                      There are few ways of doing it. One is below. A piece of advise is that do not use inline event handlers!






                      $("button").on("click", function() {
                      $("#target_menu option").filter(function(opt, el) {
                      return el.id === 'created_at' && $(el)
                      }).prop("selected", true);
                      });

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                      <select id="target_menu" name="sort_by">
                      <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
                      <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
                      <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
                      <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
                      <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
                      </select>

                      <button class="FirstFilter">
                      Click me!
                      </button>








                      $("button").on("click", function() {
                      $("#target_menu option").filter(function(opt, el) {
                      return el.id === 'created_at' && $(el)
                      }).prop("selected", true);
                      });

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                      <select id="target_menu" name="sort_by">
                      <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
                      <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
                      <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
                      <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
                      <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
                      </select>

                      <button class="FirstFilter">
                      Click me!
                      </button>





                      $("button").on("click", function() {
                      $("#target_menu option").filter(function(opt, el) {
                      return el.id === 'created_at' && $(el)
                      }).prop("selected", true);
                      });

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                      <select id="target_menu" name="sort_by">
                      <option selected="selected" id="position" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=position">Позиция</option>
                      <option id="name" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=name">Име</option>
                      <option id="price" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=price">Цена</option>
                      <option id="color" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=color">Color</option>
                      <option id="created_at" value="http://cosmeo.superweb.bg/index.php/priceslider/slider/view/?dir=asc&amp;id=35&amp;max=424&amp;min=0&amp;order=created_at">Дата</option>
                      </select>

                      <button class="FirstFilter">
                      Click me!
                      </button>






                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Mar 23 '15 at 15:05

























                      answered Mar 23 '15 at 15:00









                      lshettyllshettyl

                      6,82441528




                      6,82441528























                          0














                          Use this



                          function triggerChange(){    
                          $("#target_menu").eq(4).prop("selected","selected");
                          }





                          share|improve this answer




























                            0














                            Use this



                            function triggerChange(){    
                            $("#target_menu").eq(4).prop("selected","selected");
                            }





                            share|improve this answer


























                              0












                              0








                              0







                              Use this



                              function triggerChange(){    
                              $("#target_menu").eq(4).prop("selected","selected");
                              }





                              share|improve this answer













                              Use this



                              function triggerChange(){    
                              $("#target_menu").eq(4).prop("selected","selected");
                              }






                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Mar 23 '15 at 14:59









                              I'm GeekerI'm Geeker

                              4,04251738




                              4,04251738























                                  0














                                  as you have an id applied to each option you can target that id then use the .prop() method.



                                  $(document).ready(function(){
                                  $(".firstFilter").click(function(){
                                  var id = $("#created_at").prop("selected","selected");
                                  });
                                  });





                                  share|improve this answer






























                                    0














                                    as you have an id applied to each option you can target that id then use the .prop() method.



                                    $(document).ready(function(){
                                    $(".firstFilter").click(function(){
                                    var id = $("#created_at").prop("selected","selected");
                                    });
                                    });





                                    share|improve this answer




























                                      0












                                      0








                                      0







                                      as you have an id applied to each option you can target that id then use the .prop() method.



                                      $(document).ready(function(){
                                      $(".firstFilter").click(function(){
                                      var id = $("#created_at").prop("selected","selected");
                                      });
                                      });





                                      share|improve this answer















                                      as you have an id applied to each option you can target that id then use the .prop() method.



                                      $(document).ready(function(){
                                      $(".firstFilter").click(function(){
                                      var id = $("#created_at").prop("selected","selected");
                                      });
                                      });






                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited Mar 23 '15 at 16:56

























                                      answered Mar 23 '15 at 14:50









                                      jrodjrod

                                      6615




                                      6615























                                          -1














                                          I made this fiddle for you



                                          Fiddle



                                          First step is to get value from element with id created_at:



                                          var wantedValue= $('#created_at').attr('value');


                                          And next, you need to set selected value for your select element:



                                          $('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
                                          // you can also call .trigger() - without 'change' keyword


                                          Explanation about why you need to trigger .change HERE




                                          For select boxes, checkboxes, and radio buttons, the event is fired
                                          immediately when the user makes a selection with the mouse, but for
                                          the other element types the event is deferred until the element loses
                                          focus.




                                          Update ( thanks LShetty )



                                          $('.FirstFilter').click(function(){
                                          $("#position").removeAttr("selected");
                                          $("#created_at").attr('selected','selected');
                                          });





                                          share|improve this answer


























                                          • Why trigger change when there is no capture?

                                            – lshettyl
                                            Mar 23 '15 at 15:02











                                          • Before giving -1 search : stackoverflow.com/questions/4672505/…

                                            – Cosmin
                                            Mar 23 '15 at 15:06






                                          • 1





                                            Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

                                            – lshettyl
                                            Mar 23 '15 at 15:12













                                          • Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

                                            – Cosmin
                                            Mar 23 '15 at 15:19
















                                          -1














                                          I made this fiddle for you



                                          Fiddle



                                          First step is to get value from element with id created_at:



                                          var wantedValue= $('#created_at').attr('value');


                                          And next, you need to set selected value for your select element:



                                          $('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
                                          // you can also call .trigger() - without 'change' keyword


                                          Explanation about why you need to trigger .change HERE




                                          For select boxes, checkboxes, and radio buttons, the event is fired
                                          immediately when the user makes a selection with the mouse, but for
                                          the other element types the event is deferred until the element loses
                                          focus.




                                          Update ( thanks LShetty )



                                          $('.FirstFilter').click(function(){
                                          $("#position").removeAttr("selected");
                                          $("#created_at").attr('selected','selected');
                                          });





                                          share|improve this answer


























                                          • Why trigger change when there is no capture?

                                            – lshettyl
                                            Mar 23 '15 at 15:02











                                          • Before giving -1 search : stackoverflow.com/questions/4672505/…

                                            – Cosmin
                                            Mar 23 '15 at 15:06






                                          • 1





                                            Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

                                            – lshettyl
                                            Mar 23 '15 at 15:12













                                          • Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

                                            – Cosmin
                                            Mar 23 '15 at 15:19














                                          -1












                                          -1








                                          -1







                                          I made this fiddle for you



                                          Fiddle



                                          First step is to get value from element with id created_at:



                                          var wantedValue= $('#created_at').attr('value');


                                          And next, you need to set selected value for your select element:



                                          $('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
                                          // you can also call .trigger() - without 'change' keyword


                                          Explanation about why you need to trigger .change HERE




                                          For select boxes, checkboxes, and radio buttons, the event is fired
                                          immediately when the user makes a selection with the mouse, but for
                                          the other element types the event is deferred until the element loses
                                          focus.




                                          Update ( thanks LShetty )



                                          $('.FirstFilter').click(function(){
                                          $("#position").removeAttr("selected");
                                          $("#created_at").attr('selected','selected');
                                          });





                                          share|improve this answer















                                          I made this fiddle for you



                                          Fiddle



                                          First step is to get value from element with id created_at:



                                          var wantedValue= $('#created_at').attr('value');


                                          And next, you need to set selected value for your select element:



                                          $('#target_menu').val(wantedValue).trigger('change');  // need to call .trigger('change') here
                                          // you can also call .trigger() - without 'change' keyword


                                          Explanation about why you need to trigger .change HERE




                                          For select boxes, checkboxes, and radio buttons, the event is fired
                                          immediately when the user makes a selection with the mouse, but for
                                          the other element types the event is deferred until the element loses
                                          focus.




                                          Update ( thanks LShetty )



                                          $('.FirstFilter').click(function(){
                                          $("#position").removeAttr("selected");
                                          $("#created_at").attr('selected','selected');
                                          });






                                          share|improve this answer














                                          share|improve this answer



                                          share|improve this answer








                                          edited May 23 '17 at 11:54









                                          Community

                                          11




                                          11










                                          answered Mar 23 '15 at 14:44









                                          CosminCosmin

                                          1,7911535




                                          1,7911535













                                          • Why trigger change when there is no capture?

                                            – lshettyl
                                            Mar 23 '15 at 15:02











                                          • Before giving -1 search : stackoverflow.com/questions/4672505/…

                                            – Cosmin
                                            Mar 23 '15 at 15:06






                                          • 1





                                            Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

                                            – lshettyl
                                            Mar 23 '15 at 15:12













                                          • Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

                                            – Cosmin
                                            Mar 23 '15 at 15:19



















                                          • Why trigger change when there is no capture?

                                            – lshettyl
                                            Mar 23 '15 at 15:02











                                          • Before giving -1 search : stackoverflow.com/questions/4672505/…

                                            – Cosmin
                                            Mar 23 '15 at 15:06






                                          • 1





                                            Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

                                            – lshettyl
                                            Mar 23 '15 at 15:12













                                          • Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

                                            – Cosmin
                                            Mar 23 '15 at 15:19

















                                          Why trigger change when there is no capture?

                                          – lshettyl
                                          Mar 23 '15 at 15:02





                                          Why trigger change when there is no capture?

                                          – lshettyl
                                          Mar 23 '15 at 15:02













                                          Before giving -1 search : stackoverflow.com/questions/4672505/…

                                          – Cosmin
                                          Mar 23 '15 at 15:06





                                          Before giving -1 search : stackoverflow.com/questions/4672505/…

                                          – Cosmin
                                          Mar 23 '15 at 15:06




                                          1




                                          1





                                          Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

                                          – lshettyl
                                          Mar 23 '15 at 15:12







                                          Well, I didn't give -1 by the way! You're consfusing change to setting a selected value. What OP wants is to set the selected value by clicking on a button! So, change is irrelevant here and change is not even bound to the select

                                          – lshettyl
                                          Mar 23 '15 at 15:12















                                          Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

                                          – Cosmin
                                          Mar 23 '15 at 15:19





                                          Oh! Right! :) .. I understand what you're trying to say. My mind exploded when I read his question :))

                                          – Cosmin
                                          Mar 23 '15 at 15:19


















                                          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%2f29212870%2fjquery-on-button-click-trigger-select-option%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

                                          Bressuire

                                          Vorschmack

                                          Quarantine