i have below code snippet in jsp
<HTML>
<BODY>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<div id="action1" class="action1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</div>
<div id="action2" class="action2">
<option value="4"> 4 </option>
</div>
<option value="5"> 5 </option>
</select>
</BODY>
</HTML>
on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this
$('#action1').hide();
$('#action2').show();
But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e
with ids action1/action2 ) above options.
Use below javascript function where showOptionsClass is the class given to each option you want to show. This will
work in cross browser.
function showHideSelectOptions(showOptionsClass) {
var optionsSelect = $('#selectId');
optionsSelect.find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').attr('selected', false).hide();
optionsSelect.find('option.' + showOptionsClass).unwrap().show()
.first().attr('selected', 'selected');
}
You may not have <div> elements within a <select>, see for example this stackoverflow on the topic, which references this bit of the HTML spec.
Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as #Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the id attribute is required then maybe even adjusting the innerHtml (yuck...).
You could maybe approach it like:
markup
<select onchange="doOperation()" class="js-opt-a">
<option value="default"> Start..</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
<option value="default">Start...</option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
js
function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();
See for example this jsfiddle
Not exactly ideal though!
You can not use div to group but you can assign class to options to group them.
Live Demo
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>
$('.action1').hide();
$('.action2').show();
You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$('.action1').wrap('<span></span>').hide();
});
$("#show").click(function(){
$('.action1').unwrap('<span></span>').show();
});
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Related
I want to convert "select" into "ul" list to be able to style it nicely. The way it works in my plugin, is when you select one of the "select" options you get another section loaded below it. So, I have managed to convert "select" into "ul" using jQuery, but when I click on an option from "li" list it doesn't load my content as per original "select" dropdown.
Is there a way to do it? I guess it's something to do with values?
Below is my code:
$(".jr-form-categories").append('<ul id="property-list"></ul>');
$(".jr-cat-select option").each(function(){
$("#property-list").append('<li>' + $(this).html() + '</li>');
});
$("#property-list").on("click", "li a", function(e){
e.preventDefault();
$(".jr-cat-select").val($(this).attr("href"));
});
Here is HTML:
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
And this is how the converted list looks like, which doesn't work when you click on of the links:
<ul id="property-list">
<li>- Select Category -</li>
<li> Flat</li>
<li> House</li>
<li> Shared Flat</li>
<li> Shared House</li>
<li> Studio</li>
</ul>
I believe you are looking for something like Select2. This can convert your <select> into <ul> and <li> and not only that, it also gives you options like autosuggest and other things.
If you wanna convert it back, use .select2("destroy"). Very simple.
$(function () {
$("select").select2();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
A demonstration to convert it back to <select>:
$(function () {
$("select").select2();
$("#remBtn").click(function () {
$("select").select2("destroy");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
<button id="remBtn">Remove</button>
I am working with three dropdown selects with same options. I want to disable an item if that item is selected in other dropdown. I have JQuery code working for two dropdown box. i.e. if I am selecting one item its disabled in other dropdown. But I am having trouble doing it for three dropdown. If I select one item in first that item is disabled in two and three but when I select second dropdown, third dropdown only disables second dropdown selection.
I am new to jquery and AJAX.
PLease guide me.
Appreciate your help.
<select id="select1" name="phoneusescategories">
<option value="" selected="selected">top-1 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select2" name="phoneusescategories">
<option value="" selected="selected">top-2 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select3" name="phoneusescategories">
<option value="" selected="selected">top-3 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
http://jsfiddle.net/sakura1/xzjdsusz/
you might want to use prop() instead of attr() if you want to enable and disable the options of your select..
HERE: (jsFiddle DEMO)
I added this line just in case you want to remove other disabled options whenever you select a new option
$('select option').prop("disabled", false);
CODE SNIPPET :
$('select').on('change', function(){
$('select option').prop("disabled", false);
$("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="select1" name="phoneusescategories">
<option value="" selected="selected">top-1 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select2" name="phoneusescategories">
<option value="" selected="selected">top-2 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select3" name="phoneusescategories">
<option value="" selected="selected">top-3 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
OK this is an updated answer
$('#select1,#select2,#select3').on('change', function(){
var value =$.trim($(this).val());
$('select option:contains("'+value+'")').attr('disabled','disabled');
});
New DEMO
it will work for just Games
So change your option value same of option text like so
<option value="Games"> Games</option>
Hi I have been trying to set radio buttons to certain values depending on which select drop down was chosen.
First the select statement:
<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
I created a function that I thought would allow me to set the value, depenting on what is selected.
<script>
function setDefault() {
if (department.val() == '1'){
alert('One');
}
$("#radio-0").prop("checked", true);
</script>
I thought that if the val of department (the select drop down) was equal to 1 then set this value.
The error that I get in the console window is
*Uncaught TypeError: undefined is not a function*
I know this should be simple but as a jQuery novice I know I'm probably making a simple mistake.
Overall the goal would be to set a series of radio buttons to a specific value depending on the drop down selection. For example, if Read only was selected, certain values would be set as a 1, 2 ,3 4 or 5 (for a radio button) and so on depending on the drop down selection.
Thanks
Use jQuery onchange function.
$(document).ready(function () {
$("#department").change(function () {
if(this.value=='1')
{
alert("one");
}
$("#radio-0").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="department" name="department" class="input-xlarge">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
<input type="radio" id="radio-0">
I would recommend using javascript for this. It is such a small request that you don't really need an external libarary.
The HTML based from yours and including some radio buttons
<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select><br />
<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />
Then you simply add this javascript in your head. It selects the radio based on the value by combining "radio-" and the value to make the id.
function setDefault(input) {
document.getElementById("radio-" + input.value).checked = true;
}
JsFiddle Example: http://jsfiddle.net/bpmf3cks/
Try
$('#department').on('change',function() {
if ($(this).val() == '1') alert($(this).val())
})
http://jsfiddle.net/5x0h5g73/1/
I have web page with three dropdown. It is working fine, except for one problem.
When we select any item from one dropdown then it is disabled in the other two dropdowns, but if we again select another item from first dropdown then it disables this item but it also disables the previously selected item.
The previously selected should be enabled when new option is disabled.
Here is the code:
<select id="select1" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select3" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
Here is the JavaScript code:
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
Demo Link: http://jsfiddle.net/x4E5Q/137/
jsFiddle
Combine the focus event with the change event to achieve what you want:
JavaScript
$(document).ready(function () {
var previous;
$("select").focus(function () {
// Store the current value on focus and on change
previous = this.value;
}).change(function () {
// Do something with the previous value after the change
$("select").not(this).find("option[value=" + previous + "]").prop('disabled', false);
$("select").not(this).find("option[value=" + $(this).val() + "]").prop('disabled', true);
// Make sure the previous value is updated
previous = this.value;
});
});
Say we have 2 different select boxes with the same number of options:
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="3" >3</option>
<option value="4" >4</option>
</select>
Is it possible when we select the first box to select the same option number in the second box automatically? Without jQuery if possible.
UPDATE: the values of 2 boxes are different! When we select the first value of box1 the box 2's value will automatically would be 3! and so on...
Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.
<select id="box1" onChange="changeBox2(this.selectedIndex);">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
W3 Schools JavaScript Events
Example on Accessing SELECT properties in JS
The following JS would work:
document.getElementById("box1").onchange = function(){
document.getElementById("box2").value = this.value;
};
Not the most elegant code I've written but gets you what you need. Fiddle: http://jsfiddle.net/XZRKS/
A javascript snippet code:
var box1=document.getElementById("box1");
box1.onchange=function (){
document.getElementById("box2").value=box1.value;
}
Hope below is what you want...
<html>
<body>
<select id="box1" onChange="box2.value=box1.value">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
<select id="box2" onChange="box1.value=box2.value">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
</body>
</html>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("change", function(e){
var val = parseInt(this.value);
box2.querySelector("option:nth-child("+val+")").selected = true;
}, false);
This will only work in Gecko/Mozilla only
For IE use onChange instead of change and attachEvent instead of addEventListener, for more info visit
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
for information on querySelector see this link
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
$("#box1").on('change',function(){
document.getElementById("box2").value = this.value;
console.log($("#box2").val());
});
$("#box2").on('change',function(){
document.getElementById("box1").value = this.value;
});
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
yes it's simple in javascript. just one line.
function ch(){
document.getElementById("box2").value = document.getElementById("box1").value ;
}
you can call ch() on onchange event of box2