Jquery cross browser copy text to text box

Question

Dropdown

On my site, I have a selection of SELECT dropdown menus that are configured as follows.

<OPTION class="addTitleTag">400</OPTION> 

Search box

There is also a search box that looks like this.

  input type = "text" class = "textbox" onblur = "search_SearchBlock_blur ()" onfocus = "search_SearchBlock_focus ()" value = "Search" name = "g2_form [searchCriteria]" size = "18" id = "searchCriteria" 

Javascript

  jQuery(function() { jQuery('.addTitleTag').click(function() { titleText = jQuery(this).attr('text'); jQuery("#searchCriteria").val(titleText); //$('#go_button').click(); //acts as if the search "go" button was clicked. }); }); 

The idea is that the Dropdown option is selected from OPTION, it takes the text of this option and copies it into the search field. The user then clicks the search button to search for text. This works well in firefox. However, this is not very good in Safari. I wonder what is connected with this. I know that in the previous setup, I used list (li) tags inside an unordered list, and safari seemed to be able to get a text value. However, it does not capture text from inside the OPTION tag, in which case I need to use parameter tags. I am wondering if there is any work. Thanks!

Answer 1

You need to get the current value of the select element when the select change event fires:

 $(".myselect").change(function(){ $(".search").val( $(this).val() ); }); 

Online demo: http://jsbin.com/apuba/edit

Note that this method does not require the addition of event-logic onblur or onfocus to your HTML code. Instead, it will be related in itself if you give it adequate selectors.

 <input type="text" name="search" class="search" /> <select class="myselect" name="foo"> <option>100</option> <option>200</option> <option>300</option> </select> 

HTML doesn't need anything else.

Update

To do this, you can link several drop-down menus. Suppose you have the following:

 <select id="product_1"> <!-- options --> </select> <select id="product_2"> <!-- options --> </select> 

You can associate both of them with the following:

 $("#product_1, #product_2").change(function(){ $(".search").val( $(this).val() ); }); 

Note that I am adding new dropdowns just by changing the selector.

Answer 2

To get the selected text for ddl with jquery, you need to do the following:

 $("#yourdropdownid option:selected").text(); 

.val will only get the selected value

This will be the case if your Meaning and Text are different from each other.

This can be seen from the jquery-get-selected-text-from-dropdownlist question asked in StackOverflow