I have a select box with various options which are loaded dynamically . I am writing code to iterate through the code and make it the default option if the text value is a particular value example for in this case 8065992445. Not getting a way to do it.
$("#locationselect > option").each(function() {
if(this.text==8065992445)
});
Use val method to get the value of select option:
$("#locationselect > option").each(function() {
if($(this).val()==8065992445){
//do your task...
}
});
If you want to check value of option use $(selector).val() to getting value of option.
$("option").each(function(){
if ($(this).val() == "3")
$(this).text($(this).text() + " - Changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
And if you want to check text of option use $(selector).text() to getting text of option.
$("option").each(function(){
if ($(this).text() == "Option 2")
$(this).text($(this).text() + " - Changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
Related
I am attempting to use an optgroup label to select all of the option in the group.
This is working fine, however, when I also select a group <option> it selects all optgroup elements. How do I make it so selection is based on only the optgrouptag?
$(document).ready(function() {
$("optgroup").on("click", function() {
$(this).children("option").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</option>
</optgroup>
</select>
check the tag name of the element since it will bubble.. loop thru each of the options and only check ones that are not checked.
$(document).ready(function() {
$("optgroup").on("click", function(e) {
if(e.target.tagName === 'OPTGROUP'){
$(this).children("option").each(function(){
this.selected = !this.selected;
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple size=6>
<optgroup label="Group1">
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</optgroup>
<optgroup label="Group2">
<option value="21">Option 1</option>
<option value="22">Option 2</option>
</optgroup>
</select>
Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>
Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.
With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.
You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
I want to add separators to php-generated list with jQuery
<select>
<option value="0">all</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">other</option>
</select>
How to put separators after first eleent and before the last element that result is
<select>
<option value="0">all</option>
<option value="-1" disabled="disabled">------</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="-1" disabled="disabled">------</option>
<option value="4">other</option>
</select>
?
Thank you
var $ops = $('select option'), //refine selector if needed
$sep = $('<option>', { text: '------', disabled: true, value: -1 });
$ops.first().after($sep.clone()).end()
.last().before($sep);
Fiddle
Reference:
Traversing - Filtering
Manipulation - DOM Insertion, Outside
Don't know if it's exactly what you need, but the <optgroup> tag does something like that
Shorter code:
$("option[value=0]").after('<option value="-1" disabled="disabled">------</option>');
I have a list like that:
<select size="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
How can I get the value of this options with JavaScript (Getting the "1", "2", "3" and so on...).
if you add the id of "list" to <select> this should work: Example Here
document.getElementById('list').onchange = function( e) {
alert( this.value )
}
to get it directly without using this:
document.getElementById('list').value
document.getElementsByTagName("select")[0].value;
or
mySelection = function(element){
console.log(element.value);
}
<select onchange="mySelection(this);">