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 !
Related
I want to show only options in the second dropdown (child) attribute data-value based on first dropdown value (parent) after change, and hide the rest of options.
$('.custom_select').select2()
$('select[name=parent]').on('change', function(){
// show only options from child equals to this.val()
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
<option value="1">example 1</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
<option data-value="1">child 1</option>
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>
You can get value of first select box and then compare it with option of second select box depending on that hide or show options i.e :
$('.custom_select').select2()
$('select[name=parent]').on('change', function() {
//getting value
var val = $(this).val();
//looping through options
$('select[name=child] option').each(function() {
var self = $(this);
if (self.attr("data-value") == val) {
//if the option have that values show option
$("select[name=child] option[data-value='" + val + "']").prop('disabled', false);
} else {
//other options which don't have selected value hide them
$("select[name=child] option:not(:contains('" + val + "'))").prop('disabled', true);
}
});
});
.select2-container--default .select2-results__option[aria-disabled=true] {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<select class="custom_select" name="parent">
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child">
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>
$(document).ready(function() {
$("#child").children('option:gt(0)').hide();
$('select').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
})
function setOption() {
var id=$("#parent").val();
$('#child').select2('destroy');
$("#child").children('option').hide();
$("#child").children("option[data-value^=" +id + "]").show();
$('#child').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="custom_select" name="parent" id="parent" onchage=setOption()>
<option value="1">example 1</option>
<option value="1">example 1</option>
<option value="2">example 2</option>
<option value="3">example 3</option>
</select>
<select class="custom_select" name="child" id="child">
<option data-value="1">child 1</option>
<option data-value="1">child 1</option>
<option data-value="2">child 2</option>
<option data-value="3">child 3</option>
</select>
I am using Select2 and would like to allow users to select multiple options BUT NOT if the first option is selected.
The first option is "select later", and if this is chosen, no other items should be selectable. But if other options are selected, it should be possible to select multiple.
I can easily achieve selecting multipe, but how to limit further selection if the first option is selected?
$('#example').select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
tracking the change and update the values accordingly.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<script>
var $example = $('#example');
$example.select2();
$example.on("change", function() {
var vals = $(this).val();
if (vals.length > 1 && vals.includes("-1")) {
$(this).val("-1");
$(this).trigger('change');
}
})
</script>
You can use select2:opening event and check if the first item selected or not. If first item selected use preventDefault.
Working code here:
jsfiddle.net/xpvt214o/475246/
Something like this will do. If 'Select later' selected - rest of the items will be cleared.
$(function() {
$('#example').select2();
$('#example').on('select2:select', function(){
// if($(this).val()==null){$(this).trigger('change');}
if( $(this).val().indexOf('-1')!=-1 && $(this).val().length>1){
$(this).val('-1').trigger('change');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="example" multiple="multiple" style="width: 300px">
<option value="-1">Select later</option>
<option value="JAN">January</option>
<option value="FEB">February</option>
<option value="MAR">March</option>
<option value="APR">April</option>
<option value="MAY">May</option>
<option value="JUN">June</option>
<option value="JUL">July</option>
<option value="AUG">August</option>
<option value="SEP">September</option>
<option value="OCT">October</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
If user choose any option from list which contains C-D (in value or label it doesn't matter in this case) I would like to show next option list.
I tried with contains() Selector but somewhere there is a mistake.
My HTML structure:
<script>
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val:contains('C-D')) {
$("#choose-size").show();
}
});
});
</script>
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
The :contains() selector is intended for use in jQuery objects. To check if the val string contains C-D you can instead use indexOf().
Also note that you can simplify the logic by using toggle() and providing a boolean result as an argument which will in turn show or hide the given element. Finally, note that your CSS had a trailing ) instead of }.
With all that said, try this:
$(function() {
$("#choose-material").change(function() {
$("#choose-size").toggle($(this).val().indexOf('C-D') != -1);
}).change();
});
#choose-size {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
You can use String.prototype.includes()
Note that for more browser compatibility you can use String.prototype.indexOf() like this $(this).val().indexOf('C-D') !== -1
Code:
$('#choose-material').change(function() {
if ($(this).val().includes('C-D')) {
$("#choose-size").show();
}
});
#choose-size {display: none;)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
Try below code:
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.indexOf("C-D")>=0) {
$("#choose-size").show();
}
});
});
You can check if the selected value contains the C-D substring via a regex of shape /C-D/g, as such:
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.match(/C\-D/g)) {
$("#choose-size").show();
}
});
});
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
.contains() and .includes() are both experimental, re: non-standard. I would not recommend their use in production systems. I'd stick with .indexOf() for now.
It's easy with the indexOf method, you can see a tutorial of indexOf and substring here: http://www.dreamsyssoft.com/javascript-shell-scripting/strings-tutorial.php
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.indexOf('C-D') !== -1) {
$("#choose-size").show();
} else {
$("#choose-size").hide();
}
});
});
</script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
You have several issues with your code:
You are missing the $("#choose-size").hide(); when the value do not contain C-D
You need to use indexOf() or includes() to check if the value contains C-D. Preference is to use indexOf() as includes() do not work in IE browser.
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.indexOf('C-D') !== -1) {
$("#choose-size").show();
} else {
$("#choose-size").hide();
}
});
});
#choose-size {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
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
<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>