I have this HTML
<select name="test">
<option value="" selected disabled>please select</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
and the way I tried to get the attribute named "value" content of the current selected option in the select box is (assume I have already selected the option 1):
alert($("select[name='test'] option:selected", this).val());
but it returns me [object object]. Any clues or ideas?
You need to only use $("select[name='test']").val() to get the selected value
$("select[name='test']").change(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="test">
<option value="" selected disabled>please select</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
The value property of a select box comes from the value attribute of the selected option or the first selected option in a select-multiple type select box. So the value of the selected option can be obtained in JavaScript as follows:
// reference to 'category' select list in 'demoForm'
var sel = document.forms['demoForm'].elements['category'];
// value property of select list (from selected option)
var val = sel.value;
If option elements do not contain a value attribute, generally the text content of the option element will be the value property. However, Internet Explorer prior to version 9 will not provide the value in this case. If your option elements do not include value attributes and you wish to support older browsers, for best results use the old-fashioned approach to referencing the selected option and access its text property:
// access text property of selected option
var val = sel.options[sel.selectedIndex].text;
The options property of the select list is a node list of all the option elements contained within it. The selectedIndex property of the select list specifies the location of the selected option in the node list. The text property of an option is the content of the option element.
Related
How can we set the default value for the select2 dropdown when initializing it with something like:
$('.className').select2({
placeholder: 'Select an option',
data: dataArray
});
What you have is fine - you just need to add a blank <option></option> tag in your select element.
For example:
<select id="listOfNames">
<option></option>
<option value="Shyam">Shyam</option>
<option value="James">James</option>
<option value="Helen">Helen</option>
<option value="Dave">Dave</option>
</select>
You can apply the placeholder as an option to select2 (as you have in your example) or as a the data-placeholder attribute of the select element.
Also, you can provide select2 with the allowClear : true property which allows users to remove an item once they have selected it (returning to the placeholder).
Fiddle: https://jsfiddle.net/djuuuh80/3/
Note: Select boxes with the multiple attribute set automatically use the placeholder if provided without the need for the blank <option> tag.
I have the following piece of code in a contact form for a site I am designing:
<select id="Category" name="Category">
<option value="0" selected="selected" disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
I would like set the menu such that the user cannot leave category as the selected option. Is there any way to do this with HTML? If not, how would I do it with JavaScript?
Thank you
According to the HTML5 spec,
Constraint validation: If the element has its required attribute specified, and either none of the option elements in
the select element's list of options have their
selectedness set to true, or the only option element in
the select element's list of options with its
selectedness set to true is the placeholder label option,
then the element is suffering from being missing.
If a select element has a required attribute
specified, does not have a multiple attribute specified, and
has a display size of 1; and if the value of the first
option element in the select element's list of
options (if any) is the empty string, and that option
element's parent node is the select element (and not an
optgroup element), then that option is the select
element's placeholder label option.
Therefore, you can use
<select id="Category" name="Category" required>
<option value="" selected disabled>Category</option>
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</select>
When the user click on any option, he can´t return the first one back. But he can submit form without change, then you need to validate via JS.
It's quite simple,
function validate() {
var select = document.getElementById('Category');
return !select.value == 0;
}
And the form in HTML:
<form onsubmit="return validate()">...</form>
Will disabling select work for you?
<select id="Category" name="Category" disabled>
<option value="0" selected="selected">Category</option>
...
</select>
Or maybe disabling all but selected option will work for you (as shown here: https://stackoverflow.com/a/23428851/882073)
Ideally, you would simply remove the selected attribute from disabled options on the server side when generating the HTML document to begin with.
Otherwise, if you are using JQuery, this can be done fairly easily with:
$('#Category').find('option:not([disabled])').first().prop('selected', true);
Add this to your ondomready event handler. This will force the first non-disabled option to be selected for this select element regardless of its options' selected attributes. The disadvantage of this method is that it will prevent the selected attribute from being able to be used at all with this select element.
On the other hand, if you are trying to create category headers within a select element, you should consider using an optgroup element instead, since that is the correct semantic markup for this:
<select id="Category" name="Category">
<optgroup label="Category">
<option value="1">General Info</option>
<option value="2">Booking</option>
<option value="3">Auditions</option>
</optgroup>
</select>
So here is the thing:
I have a java app and it creates a group of selects based on a db. Also, if it happens that an element (let's call it product) has that value, it print the option with the selected attribute.
<select>
<option value="1">text1</option>
<option value="2" selected>text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
<option value="5">text5</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select>
<option value="1">text1</option>
<option value="2">text2</option>
</select>
What i want to do is set in blank (set a value of zero) to the selects that not has an element with a selected value.
If you know another form to set to blank a list (diferent from put a default empty element in every select), please let me know.
The way to do this without an empty option, is to set the selectedIndex to -1
$('select:not(:has(option[selected]))').prop("selectedIndex", -1);
FIDDLE
Demo $('option:not(:selected)').val(0); use :not and :selected and set the value to 0
I have a select that uses ng-options to populate the select as follows:
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as (v.Name ) for v in Data.people track by v.Name">
</select>
I don't want to add a value to the collection for a default if the people collection is empty or no value is selected yet. I would like to have a prompt in the select to encourage them to use the select. Thanks for your suggestions.
Just add a default option, just so angular will use this option when there is nothing selected in the ngModel or an invalid item is populated in the model. This way you don't need to add an empty value in your collection.
<select class="form-control"
ng-model="Data.selectedPerson"
ng-options="v as v.Name for v in Data.people track by v.Name">
<!-- Add your default option here -->
<option value="">Please select a person</option>
</select>
You could also change the text based on the condition:-
<option value="">{{ Data.people.length ? "Please select a person" : "No one available for selection" }}</option>
You can also remove it from DOM if it has already a selected value.
<option ng-if="!Data.selectedPerson" value="">Please select a person</option>
I have a select element
<select id='bill_to'>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
If I do
$('#bill_to').find(':selected')
it returns the first option even though it is not selected.
If an option is selected
$('#bill_to').find(':selected')
works as expected and returns the correct option
What am I doing wrong? Is this a bug. This is driving me crazy.
I just want it to return [] if there is nothing selected
If there are no select option with selected attribute, first option will be the selected option by default. You can try adding another option to top that contains default value as follow.
<select id='bill_to'>
<option value='-1'>Select<option>
<option value='a634jhj2'>test#c.com<option>
<option value='agfd4ghj2'>test2#c.com<option>
<option value='asdf634jhj2'>tes3#c.com<option>
<option value='agf2342d4ghj2'>test4#c.com<option>
</select>
If nothing is selected you will get -1 and then you can proceed.
e.g. http://jsfiddle.net/fZv5t/
I have add closing tag of option "", without this I am having an empty option get inserted after each option in the dropdown. Issue can be seen in this Fiddle.
And the working example is on this Fiddle.
Try to add an empty option tag:
<select id='bill_to'>
<option></option>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
Here you will get empty string, like this:
$('#bill_to').find(':selected').val();
If you can't or don't want to add a dummy first <option>, as an alternative you can grab and test the selected attribute of the element returned by :selected, for example:
var selection = $('#bill_to').find(':selected');
var really = (selection.attr('selected') != null);
var selval = really ? selection.val() : ""; /* or null or whatever */