Jquery - Detect click options disabled HTML select - javascript

$(function(){
$("select:option").on('click', this, function(event) {
event.preventDefault();
alert("a");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" disabled="disabled">Options 2</option>
<option value="0" disabled="disabled">Options 3</option>
<option value="0" disabled="disabled">Options 4</option>
</select>
I need to check with Jquery, if the user clicked on an option of the selector is disabled, if user clicked display a alert().
Example: A select several options, the options in this select to have a value of 0 is disabled, but if the user clicks on any of these options disabled, we show an alert().
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" disabled="disabled">Options 2</option>
<option value="0" disabled="disabled">Options 3</option>
<option value="0" disabled="disabled">Options 4</option>
</select>
I would greatly appreciate your help!


$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>

Related

How to show a div when an option is selected [duplicate]

I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>

Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/

No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!

hide dropdown option on change of another dropdown option

I have tried this, but not working fine. HTML:
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
SCRIPT:
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option[value!="+val+"]").remove();
}
in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?

You should show all options before hide.
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option").show();
$("#size option[value!="+val+"]").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>

You can make a mix of JS and CSS.
So we "reset" the size select, by removing all the disabled and also the selected.
Something like this:
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").val();
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27">Apple</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
Edit 1:
Using data-group instead of class or value
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").attr('data-group');
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1" data-group="1">AB</option>
<option value="2" data-group="2">ABC</option>
<option value="3" data-group="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27" data-group="3">Apple</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="3" class="28" data-group="3">Grapes</option>
</select>
</div>

If Select tag option is selected shows another select tag [duplicate]

This question already has answers here:
Populating One Select Box Based on the Selection in Another Select Box - JQuery?
(3 answers)
Closed 8 years ago.
I need code either in js or jquery or php like this.
<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
If option value 3 is selected, it should populate another select like
<select id="2">
-
-
</select>
if not value 3 is selected nothing happens.

You can do this by hiding and showing the other select depending on the value that is chosen (unless you want to populate the results dynamically after clicking option 3 in which case you will have to be more specific)
HTML
<select id="select1">
<option>Choose One</option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select id="select2">
<option>Choose Two</option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
CSS
#select2{
display: none;
}
JS
$("#select1").change(function(){
if($(this).val() == 3){
$("#select2").show();
}else{
$("#select2").hide();
}
});
FIDDLE

Here is a PURE Javascript Solution
See this fiddle
Javascript
function myFunction() {
var x = document.getElementById("id1").value;
if (x == "3") document.getElementById("id2").style.display = "block";
}
HTML
<select id="id1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="id2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
CSS
#id2 {
display:none;
}

Use this
Html
<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
Your Jquery Here
$("#1").change(function(){
if($(this).val() == 3){
$("#2").show();
}else{
$("#2").hide();
}
});

Try this..
<select id="1" class="first">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
$(".first").change(function(){
var selectvalue=$(".first").val();
if(selectvalue==3)
{
$("#2").show();
} else {
$("#2").hide();
}
});

How to change two select> option dropdown in the same time [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want that when I select an option from one dropdown,at the same time other dropdown value should change according to the first one.
For example: if I choose 'Value 1' from 'dropdown 1' , then in 'dropdown 2'
it should change automatically to the same value('Value 1').
Can anyone help-me please? I thank you in advance!
Here is my Demo.
DEMO
<select name="" id="">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
<select name="" id="">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>

First give identities to the selects
<select name="" id="one">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="" id="two">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
Then
jQuery(function ($) {
var $set = $('#one, #two')
$set.change(function () {
$set.not(this).val(this.value)
})
})
Demo: Fiddle

with pure javascript
<select name="test1" id="test1">
<option value="0">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="test2" id="test2">
<option value="0">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<script>
document.getElementById('test1').addEventListener("change", function () {
document.getElementById('test2').selectedIndex = document.getElementById('test1').selectedIndex;
}, false);
</script>
Fiddle here..

fiddle Demo
$(function () {
var select = $('select.select');
select.change(function () {
select.not(this).val(this.value);
});
});
HTML
added class select and value to options
<select name="" id="" class="select">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="" id="" class="select">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>

Demo: Fiddle
HTML:
<select name="" id="one">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
<select name="" id="two">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
jQuery:
$('#one').on('change', function(){
$("#two option").each(function(){
if ($(this).text() == $('#one option:selected').text()) {
$(this).attr('selected',true);
}
});
});

Try this:
$(function(){
$('#s1')[0].selectedIndex = 0;
$('#s1').change(function(){
var index = $(this)[0].selectedIndex;
$('#s2')[0].selectedIndex = index;
});
});
Here's DEMO

You could bind change event for each select. See the demo here:DEMO
$("#select-1").on("change",function(){
$("#select-2").val($(this).val());
})
$("#select-2").on("change",function(){
$("#select-1").val($(this).val());
})

Dropdown form with submit button

I have a dropdown with links in them, when I select the option it will go to the page, but I want to use a button instead but not sure how to change the javascript to make this happen:
<select name="form" onchange="location = this.options[this.selectedIndex].value;"class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>

Instead of putting location = this.options[this.selectedIndex].value in unChange, move it to a button onClick event:
<select id="dropdown" name="form" class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option-1</option>
<option value="http://www.google.com">Option-2</option>
<option value="http://www.google.com">Option-3</option>
<option value="http://www.google.com">Option-4</option>
<option value="http://www.google.com">Option-5</option>
</select>
<input type="button" value="Go!" onClick='location = document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].value'>

<select id="dd" name="form">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
<button onClick="launchPage" >
<script>
var launchPage = function() {
var e = document.getElementById("dd");
var url = e.options[e.selectedIndex].value;
window.open(url);
};
</script>

Categories

Resources