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>');
Related
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>
This is my HTML
<select id="v-1" class="form-control input-sm">
<option value="624">Video 1</option>
<option value="625">Video 2</option>
<option value="626">Video 3</option>
<option value="627">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630">Video 7</option>
</select>
In my javascript file, i have a function that removes some of the options by adding style="display: none;" to the option tag. For example:
<select id="v-1" class="form-control input-sm">
<option value="624" style="display: none;">Video 1</option>
<option value="625" style="display: none;">Video 2</option>
<option value="626">Video 3</option>
<option value="627" style="display: none;">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630" style="display: none;">Video 7</option>
</select>
But when I call $('#v-1').val(), the result is 624. I wanted the result to be 626 or the first option that doesn't have the style, display: none.
$("#v-1 option").each(function()
{
if($(this).is(':visible')){
alert($(this).val());
return false;
}
});
Doesn't matter if using above code will help. Anyhow display : none won't hide the option items in Macintosh computer.
Instead I would suggest to remove the element from the select and include it on the fly when needed.
You could, probably, do:
jQuery("#v-1").find("option:visible:selected").val();
To get the value of the selected option (and visible).
If you just want to get the value of the first visible option, you could do:
jQuery("#v-1").find("option:visible:eq(0)").val();
Try this
$("#v-1 option").each(function()
{
if($(this).is(':visible')){
alert($(this).val());
return false;
}
});
Try this :
$('option:not(:checked)).val()
http://api.jquery.com/not-selector/
Use disable instead of style="display: none;" in your option
Html-
<select id="v-1" class="form-control input-sm">
<option value="624" disabled="disabled" >Video 1</option>
<option value="625" disabled="disabled">Video 2</option>
<option value="626">Video 3</option>
<option value="627" disabled="disabled">Video 4</option>
<option value="628">Video 5</option>
<option value="629">Video 6</option>
<option value="630" disabled="disabled">Video 7</option>
</select>
script-
$(document).ready(function(){
alert($("#v-1").val());
})
output: 626
Here's the fiddle http://jsfiddle.net/v52hb28u/
I'm kicking my self for not being able to do this. But I've tried almost everything. I simply want to redirect a user to a specific page when they click an option in my option value list. Here's my current code (which should explain my question better):
<select name="test_redirect">
<option value="1" onclick="document.location = 'http://localhost/shop?item=1';">Item 1</option>
<option value="2" onclick="document.location = 'http://localhost/shop?item=2';">Item 2</option>
<option value="3" onclick="document.location = 'http://localhost/shop?item=3';">Item 3</option>
</select>
I've also tried onChange as well. Same result. Can some one please help me with this? Thank you guys.
document.querySelectorAll("[name=test_redirect]")[0].addEventListener('change',
function () {
window.location = "http://localhost/shop?item=" + this.value;
});
This depends on a relatively new browser (with querySelectorAll and addEventListener), but the principle's the same. click doesn't get triggered on options, so you have to go with change on the <select>. Might as well consolidate the code a bit too.
http://jsfiddle.net/5n5ZE/
<select id="test_redirect">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
javascript
var val = document.getElementById("test_redirect").value;
window.location.href = "http://localhost/shop?item=" + val;
jquery
$("#test_redirect").change(function(){
var val = $(this).val();
window.location.href = "http://localhost/shop?item=" + val;
});
try this (give the link of the page in value of each option)
<select name="test_redirect" onchange="window.location.href=this.form.test_redirect.options[this.form.test_redirect.selectedIndex].value">
You need to bind the event handler to the <select> and not the individual options:
<select name="test_redirect" onchange="location.assign('http://localhost/shop?item=' + this.options[this.selectedIndex].value)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
This will save you lines :
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
try this
<select name="test_redirect" onchange="location.href='http://localhost/shop?item='+this.value">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
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);">