I want to enable the multiple select when I checked the checkbox, but it doesn't work. How to achieve this using jQuery mobile?
<input type="checkbox" id="toggle"/>Toggle Select
<select name="targets" id="targets">
<option value="0">-----Select an option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
$(document).ready(function() {
$("#toggle").on('click', function() {
if ($(this).is(':checked') == true){
$("#targets").attr('multiple', true).attr("data-native-menu","false");
} else {
$("#targets").attr('multiple',false);
}
});
});
Try this
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
</style>
</head>
<body>
<input type="checkbox" id="toggle"> Toggle Select
<select name="targets" id="targets">
<option value="0">-----Select a option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<script>
$(document).ready(function(){
$("#toggle").on('click',function(){
if($(this).is(':checked')==true){
$("#targets").attr('multiple',true).attr("data-native-menu","false");
}else{
$("#targets").attr('multiple',false);
}
});
});
</script>
</body>
</html>
You are using attr() function which is good for simple HTML attributes.
However, in the newer versions of jQuery (after 1.6), for element properties like readonly, checked, multiple you need to use jQuery prop() function.
Try changing the function:
$(document).ready(function() {
$("#toggle").on('click', function() {
if ($(this).is(':checked') == true){
$("#targets").prop('multiple', true).attr("data-native-menu","false");
} else {
$("#targets").prop('multiple',false);
}
});
});
You can read more about jQuery.prop() here.
Here is my JS Fiddle Demo which works.
Start with data-native-menu="false" in the markup:
<label><input type="checkbox" id="toggle" />Toggle Select</label>
<select name="targets" id="targets" data-native-menu="false">
<option value="0">-----Select an option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
Then on the checkbox change event, destroy the selectmenu widget, update the multiple prop, and reinitialize it:
$("#toggle").on('change', function () {
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu();
});
DEMO
If you want the native menu for single select, change the code to:
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({ nativeMenu: !$(this).is(':checked')});
DEMO
Related
I have a form, and I'm trying to disable or hide options in a select form element which have a particular data-id attribute. Example form:
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I would like to hide (and disable for browsers which don't support hiding) the options with data-id of "notAvailable".
Here is what I've tried:
<script>
$(document).ready(function () {
//hide unavailable options
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
</script>
My selector seems to fail, because when I the below code to log the result, I get "notAvailable : undefined" 127 times (one for each option in my form)
<script>
$(document).ready(function () {
//test by logging
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
var loggedID = $(this).attr("data-id");
console.log(unavailable + " : " + loggedID);
}
});
});
</script>
Thank you for your help!
Try following code:
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);
Try This :
$(document).ready(function(){
$('select option').each(function(){
if($(this).attr('data-id')=='notAvailable'){
$(this).prop('disabled',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
<select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
Provide this under quotes var unavailable = "notAvailable";
Change the condition as $(this).attr("data-id") == unavailable
Example:
$(document).ready(function() {
//hide unavailable options
var unavailable = "notAvailable";
$('#fuu select option').each(function(event) {
if ($(this).attr("data-id") == unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I am having the issue in a project so I tried this on a fiddle. I am trying to trigger the select of a selectmenu dynamically. Why is the select event that I defined within the initialization of the selectmenu only firing after I did a manual selection?
I know this is possible by running $("#myselect").on("selectmenuselect") but why does it not work as suggested by the API?
$(function () {
$("#myselect").selectmenu({
select: function () {
alert("ok");
}
});
setTimeout(function () {
$("#myselect").val("option4");
$("#myselect").selectmenu("refresh");
$("#myselect").trigger("selectmenuselect");
}, 1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<select id="myselect">
<option value="option1" selected>option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
<option value="option4">option 4</option>
</select>
Something like this should do the trick :
$(function () {
$("#myselect").selectmenu().on("selectmenuselect", function (event, ui) {
console.log(ui);
});
setTimeout(function () {
$("#myselect").val("option4");
$("#myselect").selectmenu("refresh");
$("#myselect").trigger("selectmenuselect",$("#myselect"));
}, 1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<select id="myselect">
<option value="option1" selected>option 1</option>
<option value="option2">option 2</option>
<option value="option3">option 3</option>
<option value="option4">option 4</option>
</select>
Have a good day !
I have 3 selectbox on my page and onClick of close button I want to clear all the selectbox which are under the class .popup.
Below is my code to clear fields.
clearText: function() {
$('.popupBody input').val('');
$('.popupBody select').val('');
$('.popupForm').find('.errmsgActive').removeClass('errmsgActive');
$('.popupForm').find('.errmsg').html('');
}
For clearing all select boxes inside .popupBody class, I am using below code.
$('.popupBody select').val('');
For clearing selection made in select2 select box you can try following approach:
$('.popupBody select').each(function(){
//iterate over all the select boxes one by one
$(this).select2("val", ""); //clearing the selection made
});
try this, this will work for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="popupBody">
<label>Select option one</label>
<select>
<option value="">-- select --</option>
<option>select1 value 1</option>
<option>select1 value 2</option>
<option>select1 value 3</option>
</select>
<br><br><br>
<label>Select option two</label>
<select>
<option value="">-- select --</option>
<option>select2 value 1</option>
<option>select2 value 2</option>
<option>select2 value 3</option>
</select>
<br><br><br>
<label>Select option Three</label>
<select>
<option value="">-- select --</option>
<option>Stackoverflow</option>
<option>is</option>
<option>awesome</option>
</select>
<br><br><br>
<input type="button" name="" value="CLEAR" id="closebutton">
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#closebutton").click(function(){
$("div.popupBody select").val("");
});
});
</script>
</body>
</html>
To reset a dropdown you need to select the default element usually the first one:
$('.popupBody select').find('option:first-child').attr('selected','selected');
to reset the value in select2 use
$('.popupBody select').select2("val", "");
Your code is looks good.. obviously $('.popupBody select').val(''); is clearing value of select dropdown under .popupBody.
BUT
Make sure, all select input must have option value=''.
See below code
$(".popupBody select").select2();
$("#clear").click(function(){
$('.popupBody select').val('-1').change();
})
#import "https://select2.github.io/dist/css/select2.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="popupBody">
<select>
<option value="-1">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A1">A1</option>
<option value="B1">B1</option>
<option value="C1">C1</option>
</select>
<select>
<option value="-1">Select</option>
<option value="A2">A2</option>
<option value="B2">B2</option>
<option value="C2">C2</option>
</select>
</div>
<button id="clear">Clear</button>
I have a ddl control. I want to change the visibility of some items on the client-side (JS).
I only found methods to insert\remove items.
But I only want to hide\show them.
Does someone has an idea how to do so ?
You need to access the item and set its [edit]style.display[/edit] to "none":
<html>
<head>
<script type="text/javascript">
function hideItem() {
document.getElementById("a3").style.display = "none";
}
</script>
<body onload="hideItem()">
<form>
<select name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
</form>
</body>
</html>
I think you are looking for the
<span style="display:none">
option. You can toggle this style using Javascript.
In Firefox, you can use the display style:
<select id="s" name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
and:
document.getElementById("a3").style.display = "none";
However, this will not work on Internet Explorer. For IE, you can only remove the element entirely (possibly re-adding it later):
document.getElementById("s").options[2] = null;
You could move the element to a separate, hidden <select /> if you want to store it somewhere for adding back later.
The only thing you can do is removing the option.
You can do this simply in jQuery by:
$('#yourOptionId').remove();
Or you can disable the option by:
$('#yourOptionId').attr('disabled', 'disabled');
And enable by:
$('#yourOptionId').removeAttr("disabled");
But no there is no way to simply hide an option.
By "ddl control" I'm assuming the structure will be like:
<select id="selectId">
<option id="optionId"></option>
</select>
<select name="history" id="history" >
<option value="history 1" onClick="alert('h1');">history 1</option>
<option value="history 2" onClick="alert('h2');">history 2</option>
<option value="clearhistory" onClick="this.form.submit();" >Clear History</option>
</select>
could someone help me with this script?
i am expecting that whenever the user clicks history 1 ..it will alert h1
the script works in firefox and IE but not in Chrome :(
If you want to use onClick for option element in Chrome, IE, etc., you must use short fix: set onChange attribute of select element to "this.options[this.selectedIndex].onclick()"
use onchange instead of onclick for select lists.
<select name="history" id="history" onchange="historyChanged(this);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function historyChanged() {
var historySelectList = $('select#history');
var selectedValue = $('option:selected', historySelectList).val();
alert(selectedValue);
if (selectedValue == 'clearHistory') {
historySelectList.form.submit();
}
}
$(function() {
alert('my alert');
$('select#history').change(historyChanged);
});
</script>
Use onChange on the select instead of each option. here is the jsfiddle http://jsfiddle.net/tBjkg/
<select name="history" id="history" onChange="alert(this.value);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
The alert(this.value) is referring to the value of the option within the select that is currently selected.
In some browsers,
choosing same option second time,
no onchange-event throws.
This helps:
<select onchange="alert/*orwhateveryoudowith:*/(this.value);/*but set:*/this.selectedIndex=0">
<option disabled selected>Choose your Plan</option>
<option value=1>Plan 1</option>
<option value=2>Plan 2</option>
<option value=3>Plan 3</option>
</select>
Although the selected solution works, but here is a more clearer and easy way to do this:
<select name="history" id="history" >
<option value="history 1">history 1</option>
<option value="history 2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#history').on('change', function() {
if ( this.value == 'history 1')
{
alert('h1');
// You can also do anything here
}
if ( this.value == 'history 2')
{
alert('h2');
// You can also do anything here
}
if ( this.value == 'clearhistory')
{
this.form.submit();
// You can also do anything here
}
});
});
</script>