jquery: switch chosen selectbox selected value on click

Question

i want to interchange the value from one selectbox to another using jquery,

MY selectbox is in the form of http://harvesthq.github.io/chosen/

Example:

say i have 2 dropdown selectbox,in first i have selected USD & on second i have selected EURO , on click of switch button both the selectbox selected value & level should interchange

http://jsfiddle.net/34kcb/ (without chosen effect, works fine)

I tried below code but its now giving me what i am looking for, so may be you can help me

$("body").on("click", "#switchid", function(){ 
               var frm='';var to='';
               frm=$("#from_currency option:selected").val(); 
               to=$("#to_currency option:selected").val(); 
               $("#to_currency").val(frm);
              $("#from_currency").val(to);
              //currencyConverter();
  });

HTML code

 <select name="from_currency" id="from_currency">
                  <option value="USD">USD : United States Dollar</option> 
                  <option value="EUR">EUR : Euro</option> 
                  <option value="JPY">JPY : Japanese Yen</option>
                  <option value="INR">INR : Indian Rupee</option>
     </select>
<br/>

    <select name="to_currency" id="to_currency"> 
                  <option value="EUR">EUR : Euro</option>  
                  <option value="USD">USD : United States Dollar</option> 
                  <option value="JPY">JPY : Japanese Yen</option>
                  <option value="INR">INR : Indian Rupee</option>
     </select>

<br/>

<input type="button" id="switchid" value="Switch"/>

UPDATE:

In simple selectbox its working but after integrating with Choosen selectbox ,same thing is not working . any idea?

i solve my issue from this answer http://stackoverflow.com/a/9679013/2178632 — user2173803, Apr 24 '14 at 15:05

wobbit · Answer 1 · 2014-04-24T08:32:55.300

0

Try this:

$("body").on("click", "#switchid", function(){ 
  var frm = '';
  var to ='';
  frm = $("#from_currency").val(); 
  to = $("#to_currency").val(); 
  $("#to_currency").val(frm);
  $("#from_currency").val(to);
  $("#from_currency, #to_currency").trigger("chosen:updated");
});

Working here: http://jsfiddle.net/H5x5u/

You don't need to select the option:selected, the .val() jQuery does that for you.

edited Apr 24 '14 at 08:32

answered Apr 24 '14 at 07:57

wobbit

103
4

The problem is the dropdown is hidden when you're using the chosenbox. You'll want to add $("#to_currency, #from_currency").trigger("chosen:updated"); just before the end of the line. I've updated my answer, it *should* work :) – wobbit Apr 24 '14 at 08:18

chandu · Accepted Answer · 2014-06-19T11:44:51.000

0

try this one

$("#switchid").on("click", function(){ 
          var frm = '';
          var to ='';
          frm = $("#from_currency").val(); 
          to = $("#to_currency option:selected").val(); 
          $("#to_currency").val(frm);
          $("#from_currency").val(to);
          $("#from_currency, #to_currency").trigger("chosen:updated");
        });

The last line " $("#from_currency, #to_currency").trigger("chosen:updated");" should trigger chosen to update. I haven't tested this though, as I don't have chosen (or time at the moment)! :)

edited Jun 19 '14 at 11:44

answered Apr 24 '14 at 08:03

chandu

2,276
3
20
35

plz check my question once again, i have diffrent type of selectbox – user2173803 Apr 24 '14 at 08:13
trigger this function end of the above function $("#from_currency, #to_currency").trigger("chosen:updated"); – chandu Apr 24 '14 at 08:16
i tried what you have give but still nothing happening – user2173803 Apr 24 '14 at 09:51

score 0 · Answer 3 · answered Apr 24 '14 at 08:40

$("body").on("click", "#switchid", function(){ 
 var firstDropDownValue = $("#from_currency option:selected").attr('selected','selected').val();  
 var secondDropDownValue = $("#to_currency option:selected").attr('selected','selected').val();
var afterSwitchFirstValue = $("#from_currency").val(secondDropDownValue);        
var afterSwitchSecondValue = $("#to_currency").val(firstDropDownValue);
  });

pl chk the answer in http://jsfiddle.net/34kcb/2/ and the value is interchanging in selectbox its working as you need..

jquery: switch chosen selectbox selected value on click

UPDATE:

3 Answers3