I have the following code:
<select name="search[active]" class="form-control" placeholder="Active" />
<option value="1">True</option>
<option value="0">False</option>
</select>
And I want to select an option by value, for example, select True, for this I try whit the following code:
$('[name="search[active]"').text(True);
and
$('[name="search[active]"').val(True);
and not work.
Any idea?
Thanks
The selector by value will be like :
$('[name="search[active]"] option[value=1]').text();
And the selector by text will use :contains() like :
$('[name="search[active]"] option:contains(True)').val();
//Select By value
console.log($('[name="search[active]"] option[value=1]').text());
console.log($('[name="search[active]"] option[value=0]').text());
//Select By text
console.log($('[name="search[active]"] option:contains(True)').val());
console.log($('[name="search[active]"] option:contains(False)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="search[active]" class="form-control" placeholder="Active">
<option value="1">True</option>
<option value="0">False</option>
</select>
Related
I stuck in this issue which is when a user selects an option from one select box the option should be hidden for the other select boxes. When a selected option changes the previously selected option should become available again to the other select boxes.
The problem with my current code:
My code is working when the select box is normal option, if I change to select2 it will not function. Anyone know how to do it if the select box is select2 :(?
Code: http://jsfiddle.net/t8170aqg/1/
There are few issues in your code
You are using val in option which is not correct your should use value
Also you not matching with val() of the selected option in the previous select you are mat aching the text which will be always different.
Edit: You have to use .each to set attr disabled for other options.
Working Fiddle Demo: http://jsfiddle.net/usmanmunir/bqzt1rf9/
Run snippet below to see it working.
Using disabled attr on option
$(".s").select2()
$('.s').change(function() {
let value = $(this).val()
$(this).siblings('.s').children('option').attr('disabled', false)
$('.s').each(function() {
$(this).siblings('.s').children('option[value=' + $(this).val() + ']').attr('disabled', 'disabled')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<select class="datas_0 s">
<option selected disabled>Choose</option>
<option value="1">lim</option>
<option value="2">tan</option>
<option value="3">alax</option>
<option value="4">king</option>
</select>
<br>
<br>
<select class="datas_1 s">
<option selected disabled>Choose</option>
<option value="1">lim</option>
<option value="2">tan</option>
<option value="3">alex</option>
<option value="4">king</option>
</select>
<br>
<br>
<select class="datas_2 s">
<option selected disabled>Choose</option>
<option value="1">lim</option>
<option value="2">tan</option>
<option value="3">alex</option>
<option value="4">king</option>
</select>
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
I need the default value of dropdown list for business logic if user doesn't select any value from dropdown list then i have to use default value of dropdown
You can get it by doing document.getElementById('idoftheselect').value
function getDefaultVal() {
console.log(document.getElementById('sel').value)
}
<select id='sel'>
<option val='1'>1</option>
<option val='2'>2</option>
<option val='3'>3</option>
<option val='4'>4</option>
<option val='5'>5</option>
</select>
<button type='button' onclick='getDefaultVal()'>Get Value</button>
add one more option with selected attribut
<select id="someId">
<option value="0" selected>Default</option>
</select>
using this
$('#selector option:selected').val();
In that case add one more option in dropdown like
<option value="-1">-select-</option>
then using jquery
$('select option:selected').val();
will always give the current dropdown selected value.
I want to get attribute value of selected option element.
jQuery:
$("#select_element").val().attr("val");
HTML:
<select id="select_element" class="selectpanel">
<option val="x">element1</option>
<option val="y">element2</option>
</select>
Try this:
$('#select_element option:selected').attr('val');
Or
$('#select_element option:selected').val();
both are valid!
Simple use:
$("#select_element").val();
If you want the text of it, then:
$('#select_element option:selected').text();
JSFIDDLE
try this for get the value in the options
$("#select_element").val()
And try this for get the text in te option selected
$('#slcFoo option:selected').text()
You can see the example here
Re your edit showing:
<option val="x">element1</option>
val is not a valid attribute for option elements. The correct attribute is value, or if you want a custom attribute, use a data- prefix (data-val, for instance).
So depending on whether you meant value or data-val:
If you meant value:
$("#select_element").val() does give you the value (value attribute) of the selected option element in the select box:
console.log($("#select_element").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
If you meant data-val:
If you wanted to get some other attribute from that same option element, you'd do it like this:
var otherAttributeValue = $("#select_element option:selected").attr("data-val");
E.g.:
var otherAttributeValue = $("#select_element option:selected").attr("data-val");
console.log(otherAttributeValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
<option data-val="first" value="1">One</option>
<option data-val="second" value="2" selected>Two</option>
<option data-val="third" value="3">Three</option>
</select>
I have a list like
<select name="operation" id="operation">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>
I have to get value "XXXX" if user select an option 1, for 2nd I have to get show "YYYY" and so on. And format should be like in the above means i don't have to change value="1","2","3". I need it in javascript.
Thanks
You can get it by grabbing the <select> then getting the <option> at the .selectedIndex, like this:
var sel = document.getElementById('operation');
var text = sel.options[sel.selectedIndex].text;
You can test it out here.
var dropdown = document.getElementById('operation');
var selected = dropdown[dropdown.selectedIndex].text;
probably also check for selectedIndex not being out of bounds
Try this to alert selected option's text :
<select name="operation" id="operation"
onchange="alert(this.options[this.selectedIndex].text);">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>