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)
Related
I am trying to automate something here. The website on which I run the Javascript,
When I click on an <option> element inside <select>. The website changes the content of another <select> below it. This only happens when I manually select an option.
But when I select an option using Javascript like this: No content gets changed:
document.getElementById("Category").selectedIndex = 8;
Try
let options= document.querySelectorAll('select option')
You can access the innerHTML property of first option using options[0].innerHTML
Add onChange event to you select element using
document.querySelector('select').addEventListener('change',()=>{
alert('Changed')
})
Hope it helps
Edit - You might also want to check the current selected option and want to make changes accordingly. You can check the current selected option by
document.querySelector('select').value //Returns the value of selected option
Disclaimer: There is no reproducible example, so this is my best guess.
The website you are talking about probably captures the click events and uses that to alter the selects. For example,
$("select > option").click(function(){
//do something
...
});
When you change the selectedIndex, yes, you are selecting a new option, but you are not sending the click event, so the above function is not called. You will need to inspect their source/provide more details for more clarity.
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
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
I'm trying to do two things:
Show a hidden field if an option is selected, and hide that field if not (I have this part working - although if I use a variable it doesn't work)
If the option is selected, add a required attribute to the field that was displayed. When another option is selected, remove the required attribute.
Here's a fiddle link:
http://jsfiddle.net/tucsonlabs/QCY2Q/
if ($("#aCard").filter(":selected")) this will always pass through because jQuery always return an object and anything non zero or not null or undefined passes through if block.
Use this if ($("#aCard").filter(":selected").length > 0), you can even use variable to show the required element in your fiddle take a look.
http://jsfiddle.net/QCY2Q/1/
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");