Develop Reference

Why isn't the select box reflecting the values shown in alerts? (Javascript/jQuery)

I'm debugging some jQuery. Here's the active script snippet:
<select id="myselect[]" multiple="multiple">
<option value="any">any</option>
<option value="item1" selected="selected">description 1</option>
<option value="item2">description 2</option>
<option value="item3">description 3</option>
</select>
function myselect_change() {
var listid = '#myselect\\[\\]'; // for ease of reading
var current_sel_in = ($(listid).val() || ['any']); // Ensures correct when none selected
alert ('selection on entry: ' + current_sel_in.join(", "));
// if "any" is selected, clear all selections
if (!jQuery.inArray('any', current_sel_in)) {
$(listid + ' option:selected').removeAttr('selected');
}
// if nothing selected, select "any"
if ($(listid + ' option:selected').length == 0) {
$(listid + ' option[value="any"]').attr('selected', 'selected');
}
var current_sel_out = ($(listid).val() || ['any']);
alert ('selection on exit: ' + current_sel_out.join(", "));
}
$('#myselect\\[\\]').on('change', function() {
myselect_change();
});
I test the code by using clicks and ctrl+clicks to select and deselect options, for example:
Select multiple items then ctrl-click "any" to add "any" as a selection (expected: "any" selected, but all others deselected)
Select a single item, then ctrl-click that same item again so nothing selected (expected: "any" selected, all others deselected)
What's weird is that I can see the correct start+end values in the alerts, so the logic seems to be doing what it should. But the GUI isn't showing the programmatically changed options when the event ends. On exit, when it says that "any" is the only selected option, sometimes no options are highlighted in the select box on the GUI.
To confuse things, sometimes the selection is partly modified on the GUI when the alerts are left in but not when they're deleted - sorry that's confused, it seems almost random.
I haven't seen other similar code needing forcible refresh handling, so that doesn't seem to be an issue either.
What's going on?

When any is clicked remove the selected attribute for all the option except the one with any.
Replace $(listid + ' option:selected').removeAttr('selected'); with $(listid + ' option[value!="any"]:selected').removeAttr('selected');
function myselect_change() {
var listid = '#myselect\\[\\]'; // for ease of reading
var current_sel_in = ($(listid).val() || ['any']); // Ensures correct when none selected
alert ('selection on entry: ' + current_sel_in.join(", "));
// if "any" is selected, clear all selections
if (!jQuery.inArray('any', current_sel_in)) {
$(listid + ' option[value!="any"]:selected').removeAttr('selected');
}
// if nothing selected, select "any"
if ($(listid + ' option:selected').length == 0) {
$(listid + ' option[value="any"]').attr('selected', true);
}
var current_sel_out = ($(listid).val() || ['any']);
alert ('selection on exit: ' + current_sel_out.join(", "));
}
$('#myselect\\[\\]').on('change', function() {
myselect_change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect[]" multiple="multiple">
<option value="any">any</option>
<option value="item1" selected>description 1</option>
<option value="item2">description 2</option>
<option value="item3">description 3</option>
</select>

JQuery UI select menu change showing text on change

I have a small project in which I have a select dropdown menu provided by the JQuery UI plugin.The dropdown contains a list of countries and their call code numbers.Is there a way that I show the country name and call code when the select is on focus and show only the call code when its out of focus with selected value.
Here is the code
HTML
<select class="form-control" id="cdropmovil" name="dropmovil"></select>
JavaScript Function
$.getJSON('../../Content/paises.json', function (json) {
var countries = json.countries;
countries.forEach(function (country) {
var opcion = '<option value="'+country.code+'">' + country.name + ' '
+ country.code + '</option>';
$("#cdropmovil").append(opcion);
}, this);
And here is what I tried obviously unsuccesfully...
$("#cdropmovil").on('change', function () {
$(this).text($("#cdropmovil option:selected").val());
})

You can use data-* attribute to store each option tag text value. This way you text value will not get lost if you update your option tag text value on value change.
your $.getJSON(...) will get modified to
$.getJSON('../../Content/paises.json', function (json) {
var countries = json.countries;
countries.forEach(function (country) {
//updated opcion variable
var opcion = '<option data-country-code-name="'+country.name+' '+country.code+'" value="'+country.code+'">' + country.name + ' '+ country.code + '</option>';
$("#cdropmovil").append(opcion);
}, this);
Now you can use data-* attribute value to change text on change() event handler
Here is the modified code
$(document).ready(function(){
$("body").on("focus","select",function(){
$(this).children("option").each(function(){
$(this).text($(this).data("country-code-name"));
});
});
$("body").on("change","select",function(){
var see = $("select option:selected").val();
$("select option:selected").text(see);
//This blur is added to remove focus on value select which was not commented link
$(this).blur();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="countries">
<option data-country-code-name="USA 1" value="1">USA 1</option>
<option data-country-code-name="Africa 2" value="2">Africa 2</option>
<option data-country-code-name="Switzerland 3" value="3">Switzerland 3</option>
<option data-country-code-name="Germany 4" value="4">Germany 4</option>
</select>
https://jsfiddle.net/weuydu6e/2/

When you modify the DOM of you select box, you need to re-initialise or refresh your JQuery SelectMenu:
$( "#cdropmovil" ).selectmenu( "refresh" );
This line should be after your forEach.
Reference:
http://api.jqueryui.com/selectmenu/#method-refresh
When you select the element from the UI the text should change automatically in the UI.
If you want to take it from the callback to use somewhere else:
$("#cdropmovil").on('change', function () {
var text = $(this).val();
// Do whatever you want with text
});

How to populate a dropdown select box by matching contained text?

I have created two identical dropdown select boxes as below:
HTML
<select id="ddl1" name="ddl1">
<option value="1">TEXT 1</option>
<option value="2">TEXT 2</option>
<option value="3">TEXT 3</option>
</select>
<select id="ddl2" name="ddl2">
<option value="1">TEXT 1</option>
<option value="2">TEXT 2</option>
<option value="3">TEXT 3</option>
</select>
Using jquery I have created code to update the value of one when the other changes and vice versa as below:
JQUERY
var a = ('#ddl1'),
b = ('#ddl2');
$(a + ',' + b).change(selectddl);
$(selectddl);
function selectddl() {
var val = $(this).val();
var text = $(this).text();
if (this.id === 'ddl1') {
$(b + ' option[value="' + val + '"]').prop('selected', true);
$(b).selectmenu('refresh');
} else if (this.id === 'ddl2') {
$(a + ' option[value="' + val + '"]').prop('selected', true);
$(a).selectmenu('refresh');
}
};
My requirements now are to update the select boxes based on their contained TEXT and not their value.
QUESTION
How to update a dropdown select box based on another select box contained TEXT?
After some research I have tried but failed to do this as below:
JQUERY
var a = ('#ddl1'),
b = ('#ddl2');
$(a + ',' + b).change(selectddl);
$(selectddl);
function selectddl() {
var val = $(this).val();
var text = $(this).text();
if (this.id === 'ddl1') {
$(b + ' option[value="' + val + '"]').prop('selected', true);
$(b).selectmenu('refresh');
} else if (this.id === 'ddl2') {
$(a + ' option:contains("' + text + '")').prop('selected', true);
$(a).selectmenu('refresh');
}
};
CLICK FOR DEMO
Can anyone explain how this can be achieved?
The correct answer to this question would NOT use contains due to the conflicts that could arise with text such as:
TEXT
TEXT1

You can use the .filter() function to achieve what you are requesting. You will basically need to select all of the options, then call .filter(), passing in a function that only accepts the option who's text is equal to what you expect.
For example, your else if statement might look like this:
else if (this.id === 'ddl2') {
$(a + ' option').filter(function() {
return this.text === text;
}).prop('selected', true);
$(a).selectmenu('refresh');
}
Also, it looks like you need to change your text variable as well. You should change it to something that will select the text of the currently selection option, like so:
var text = $(this).find(':selected').text();
Here's a working Fiddle.

Is there any handler that can detect if a select field has any option selected without jQuery

When an option is selected that wasn't previously, the onChange handler can detect this. How can a preselected option be detected (i.e., whether a select field has any option selected)? Is this possible without jQuery? Is there a handler, such as onSelected (not the same as onSelect for highlighted text) for this event?
Example:
<select onSelected="FunctionRunIfOptionSelected()">
<option> ... </option>
...
</select>
The preselected option will have been selected on page load. i.e., with the HTML dynamically rendered:
<option selected> ... </option>

If I understand, the task is to tell if an option has the selected attribute hard-coded into the HTML? If so, this should work:
function test () {
var opts = document.getElementById("myselect").options;
var i, len = opts.length;
for(i = 0; i < len; i++) {
if (opts[i].getAttribute("selected" ) != null ) { // opts[i] has the selected attribute
change_other_select(i); // pass the option index to your other function
break;
}
}
}
window.onload = test;
The trick is to distinguish between the selected property and the selected attribute, and also between a null value and an empty string.

var myselect = document.getElementByid('selectid');
myselect.options[myselect.selectedIndex];

To test for selected option on page load, you'll need to catch these in the window.onload handler
One the page is loaded you'll need to continue to use the onChange handler, but use selectedIndex property to test if this is populated with an index within your option list.
Alternatively give your options values in the HTML and check the values themselves. This will allow deterministic behavior when expanding the option list.

Yes, using the .options[] and .selectedIndex methods you can handle this cleanly and unobtrusively like so:
HTML
<select name="select" id="select">
<option value="">...</option>
<option value="1">One</option>
<option value="2" selected="selected">Two</option>
</select>
JavaScript
window.onload = function(){
var select = document.getElementById("select"), selected = select.value;
select.onchange = function(){
var val = select.options[select.selectedIndex].value;
if(val != selected) {
alert("Another value " + val + " was selected, which is not the same as the default value of " + selected);
} else {
alert("Same value as the default of " + selected + " was selected");
}
};
};
From within the JS, you can check and manipulate the val variable as you like.

You can detect if the select field does not have the default value selected like this:
var selects = document.getElementsByTagName("select");
for (i=0;i<selects.length;i++) {
if (selects[i].selectedIndex != 0) {
eval(selects[i].getAttribute("onSelected"));
}
}

keep dropdownselection? what am i doing wrong?

I am trying to check if there is hos paramaeter in the url has anything and if there is, then pass that value as the selected attribute to the dropdown on page refresh, so the dropdown option remains selected even after refresh
var value = window.location.href.match(/[?&]hos=([^&#]+)/) || [];
if (value.length == 2) {
$('#hospitalDropDown[value="' + value[1] + '"]').attr('selected', 'selected');
}
Here is the dropdown:
<select id="hospitalDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')"> <option value="http://mysite.com/events/Pages/default1.aspx">All Hospitals</option> <option value="http://mysite.com/events/Pages/default1.aspx?hos=Dyer">Dyer</option> <option value="http://mysite.com/events/Pages/default1.aspx?hos=Carmel">Carmel</option> </select>

It looks like your options have the querystring value—All Hospitals, Dyer, Carmel—as the text, but the whole url as the value.
As a result, match on your option's value with *=
if (value.length == 2) {
$('#hospitalDropDown option[value*="' + value[1] + '"]').attr("selected", "selected");