Develop Reference

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!

You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>

I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

Get value of selectbox option without using .change()

I have a selectbox as follows:
<select id="select_search">
<option value="search_contact">Contact</option>
<option value="search_customer">Customer</option>
<option value="search_employee">Employee</option>
<option value="search_servEmp">Service Employee</option>
<option value="search_servOrg">Service Org</option>
</select>
The above selectbox is part of a search form. When you submit the form, using an ajax request the results are returned to same page asynchronously.
On my results page (the one loaded asynchronously), I have a grouping of other select boxes that act as filters for the results.
<select id="select_customer">
<option value="">something</option>
</select>
<select id="select_contact">
<option value="">something else</option>
</select>
etc....
How can I get the value of the original selectbox (#select_search) to show/hide the appropriate selectboxes that were loaded via ajax. (eg. if search_contact was the selected option, only show the select box with id="search_contact")
The only way I'm familiar with is to get the value of the select box on change, but in this case the affected elements will not be loaded until after the change occurs.

You can Try this in jsFiddle .
$(function () {
$(document).on('change', '#select_search', function () {
$('select:not(#select_search)').addClass('invisble');
var selectSearchVal = $(this).find('option:selected').val();
$('#select_' + selectSearchVal.replace('search_', '')).removeClass('invisble');
});
});

If you're using JQuery $(#select_search).val() should do the trick.

The new way to make a $.live
$(document).on('change', '#select_search', function() {
// change
});

Creating a select drop-down list that expands when a user hover over an option

I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?

Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.

How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

I have the following markup:
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchange event. So, the jsFunction() is not called. But I want the jsFunction() called even in this case. How can I achieve this?

I'd do it like this:
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want you could have the same label as the first option, which in this case is 1.
Even better: put a label in there for the choices in the box.

You have to add empty option to solve it,
I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}

Just set the selectIndex of the associated <select> tag to -1 as the last step of your processing event.
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
It works every time, removing the highlight and allowing you to select the same (or different) element again .

Try this. Just add an empty option. This will solve your problem.
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>​

For this problem, I have finally put a new <i> tag to refresh the select instead. Don't try to trigger an event if the selected option is the same that the one already selected.
If user click on the "refresh" button, I trigger the onchange event of my select with :
const refreshEquipeEl = document.getElementById("refreshEquipe1");
function onClickRefreshEquipe(event){
let event2 = new Event('change');
equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;
This way, I don't need to try select the same option in my select.

use the "onmouseup" property with each option element. it's verbose, but should work. also, depending on what your function is actually doing, you could arrange things a little differently, assuming the number is important in the handler:
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>

JavaScript code:
on mousedown event: set selectedIndex property value to -1
on change event: handle event
The only drawback is that when the user clicks on the dropdown list, the currently selected item does not appear selected

It's not firing because the value hasn't "changed". It's the same value. Unfortunately, you can't achieve the desired behaviour using the change event.
You can handle the blur event and do whatever processing you need when the user leaves the select box. That way you can run the code you need even if the user selects the same value.

How initialize dropdown (<select/>) with preselected value and then change it?

I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?

This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.

It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/

You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/

Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.

please use this code instead,
$('#selectId option:selected').val();