Ok, first off this isn't to find a value of a select boxes selected option. But its along the lines there of. I have a function I am working on that will check to see if the value selected matches that of the one being compared to from somewhere else, where if the match is found it does one thing if not it does another. However. Due to a recent requirement. The original function breaks cause there is not the probability that the select wont even be touched prior to the need of function.
So Im trying to tell if theres anyway to check to see if the select in question has had anything chosen or not prior to it doing anything else. I'm thinking of the concept of checking for an empty array with length, but I'm not looking to see if the select is empty or not. I need to know if there is a selected value or not so I can act accordingly with that. Hope this makes sense.
I'm totally not sure if I get you right, but wouldn't this be enough:
if( $('option:selected').length ) {
// at least one option element was selected
}
Easiest way to find if a select has a selected value:
var selectedValue = $('#someSelect option:selected').val();
There will always be a selected option. Use:
var $val = $('select option:selected').val();
to capture the value. If no option is selected by the user, the first option will be selected by default. So check against that value. If no value is given to the first option, it will pass back the text of the option. See the following jsFiddle.
However, it is important to note that assuming the first option will always be chosen isn't full proof. Some browsers such as FireFox can cache the value of form elements. In order to ensure that the form element acts as expected use the autocomplete attribute like so:
<select name='something' autocomplete='off'>
See: FireFox Doc on Autocomplete
Related
I'm making a quiz application involving a select box. The user selects an option and when they press a button, it should check if the selected option is the correct answer by checking an array of values. I can't figure out how to get the selected value from the select box. I've tried to find information about this, but I only want to use JS, no JQuery. I tried using:
var item = document.getElementById("selections");
var selection = item.options[item.selectedIndex].value;
but I get a Type Error, saying that item.selectedIndex isn't defined. I'm confused because from what I found, selectedIndex is a default property of select tags? I've only worked with radio buttons before, using a for loop and checking every option to see which was checked, but I can't use that here. I don't know if it matters, but I'm doing this without a form tag, just linking a js function to an event listener on a button. Any help would be appreciated. Thanks!
Edit: Here is a fiddle of my code as per request: https://jsfiddle.net/jmf68ycu/
The part where the problem lies is in the submit() function in the first line.
Update: I found something online about the problem having to do with JS trying to call the element before the element is loaded, so I put the variables inside the function, which is only called when the button is pressed. The problem still persists (same error).
You use like this
var item = document.getElementById("selections").value;
you select value store item variable
this code use full for you. :)
You have a syntax error somewhere. your code looks right. you probably aren't getting the right id. your first line probably doesn't return the right select.
var e = document.getElementById("bla");
var str = e.options[e.selectedIndex].value;
alert(str);
<select id="bla">
<option value="val1">test1</option>
<option value="val2" selected="selected">test2</option>
<option value="val3">test3</option>
</select>
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)
I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?
Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.
Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.
You can insert option in select, and remove that whenever it is changed to reduce problems with that options
Check the Demo here
I have tried many ways to select an option with jquery including .val("0") .attr('selected', 'selected') and .attr('selected', 'true') and the TexoTela plugin. They all seem to update the html but the browser still shows the last item selected by the user.
Try out this fiddle... Select the dropdown value 1 and then click the link.
Is there any way to actually update the displayed value?
You mean change which item is selected?
$('select').val('0');
There are other ways, but this is the basic, following your example.
jsfiddle
You can read up on the documenation for .val() here, and the snippet:
checks, or selects, all the radio
buttons, checkboxes, and select
options that match the set of values.
EDIT for jQuery Mobile
For jQuery Mobile you also need to refresh the select as mentioned in the mobile docs:
If you manipulate a select via
JavaScript, you must call the refresh
method on it to update the visual
styling.
You can do this by:
$('select').selectmenu("refresh",true);
You're setting the option value to zero.
Set the select not the option val
$('select').val('0');
and you'll probably want to use an #id instead just a 'select' selector.
Still use your .val("0") to set the value, and to update in the browser you have to use one of the following:
.trigger("liszt:updated");
or
.trigger("chosen:updated");
Just one will work, depending on how you create your select.
It's gonna be like:
$("#Your_select").val('0');
$("#Your_select").trigger("liszt:updated");
I have this form:
http://dl.dropbox.com/u/14698783/project/register/form.htm
The city input is hidden by default.
I want to display it when the visitor choose USA or Canada only.
For this, I'm using jQuery. First, I set up and event handler for the country dropdown using the change method - this will be raised when the value is changed (not surprisingly). Then test if the value selected is in a set of accepted values (for this, I'm using the 'in' operator). Since this is an input element, I can just reference element.value without wrapping it in jQuery. Finally, use the toggle, passing in the boolean value to indicate if the select should be shown or hidden.
var valuesToShowFor = [0, 1]; // USA + Canada
$("#title").change(function() {
var shouldShowCity = (this.value in valuesToShowFor);
$("#city").toggle(shouldShowCity);
});
Example: http://jsfiddle.net/jonathon/xULyc/
For this, I recommend having IDs on your elements. It makes it much easier and neater to do the jQuery selects - otherwise you'd need something like $("input[name='title']") to reference the element.
Here are some clues for you:
Catch onchange with jQuery .change()
Get the selected option value with jQuery .val()
If the selection option value is one of those you need, use jQuery .show() to show the other input box (and .hide() to hide it)