Hi I am developing jquery application. I have one dropdownlistbox with jquery chosen. Whenever I load my page first time by default I want to hide some of the options in dropdown. For example, Below is my dropdownlistbox,
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>
This is my java script code.
$(function () {
$(".chosen-select").chosen();
});
$(document).ready(function () {
jQuery('.limitedNumbSelect2 li:contains("Monday")').hide();
});
The above code does not work as expected. It does not hide Monday on page load. May I get some help here? Thank you all.
To fix this you can remove the required option element before you instantiate the Chosen library on the select, like this:
$(function() {
$(".limitedNumbSelect2").find('option:contains("Monday")').remove().end().chosen();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>
Alternatively if you have no alternative but to amend the option elements after calling chosen(), then you can use the chosen:updated event to manually update the shown options:
$(function() {
var $chosen = $(".limitedNumbSelect2").chosen();
// your other code here...
$chosen.find('option:contains("Monday")').remove();
$chosen.trigger("chosen:updated");
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>
I think that the better way is by hiding options by its value and not by its text.
So, you can write:
$('.limitedNumbSelect2 option[value="1"]').hide();
In your code you mention 'li' element that is not present at all...
You have a typo in your code:
jQuery('.limitedNumbSelect2 option:contains("Monday")').hide();
Related
I need to show/hide options on one select drop down dependant on another select drop down option.
My code:
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
When I change the selection of my first 'column_select', I want to change my 'layout_select' options using hide / show
Something like this StackOverflow issue
Note: I am using Select2.
In my implementation I did exactly as the example, but as I am using select2 scrpit does not work.
Does anyone know how to do the same thing, knowing that I'm using select2? Without using .remove () and .append (), but exactly as in the example giving hide / show.
As suggested in this answer, you could disable the options instead of hiding them and use CSS to hide the options if you want (they will be grayed out otherwise).
You will have to call $("#layout_select").select2(); at the end of the change event and call $("#column_select").change(); to trigger the change event on page load.
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').prop('disabled', true);
$("#layout_select").children("option[value^=" + $(this).val() + "]").prop('disabled', false);
$("#layout_select").select2();
})
$("#column_select").change();
});
.select2-container--default .select2-results__option[aria-disabled=true] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>
i founded more example about this, but when i try , it's not work.
$(window).load(function () {
$("#country").html('Please select in here');
});
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please see it and tell me "Why it's not working?".Thank guys
It's impractical to replace the whole content between <select id="country"> and </select> with 'Please select in here' ? If you just want to replace the first option's content, then try this.
$(window).load(function () {
//$("#country").html('Please select in here');
});
$(document).ready(function() {
//$("#country").html('Please select in here');
$("#country").find("option:first-child").html('Please select in here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Not quite sure what you want, but if you want to add another option just append/prepend new option into select like so:
$(window).load(function () {
$("#country").prepend('<option value="" selected>Please select in here</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please select in here:
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
You can't add text in the select. You need to add in front of it.
If you really want to add the text after load, put one more div in front of the select to control
I am not entirely sure what you are trying to do, but if you just want to change the default text, you probably are looking for something like this:
<select id="country">
<option value="None" selected>Please select in here</option> <!-- set the default selection -->
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
and then the JS to set a new value would be:
$(window).load(function () {
$("#country").val('China');
});
Bit confuse what you trying to achieve
To Pre append
$('#country').prepend('<option>Please select in here</option>');
To dynamically Select:
$('#country').val("None")
Add new Option:
$('#country').append(new Option('Foo', true));
I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
What I am trying to accomplish is the following...
HTML
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectbox();
$("#dateselector_child").selectbox();
});
</script>
</body>
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
Any help will be appreciated
I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
UPDATE: Adding markup for the above script
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
Hope it's clear now....
Just a startingpoint!
$("#dateselector_parent").change(function() {
$('#dateselector_child').val($(this).find("option:selected").index());
});
Demo
AJAX, expands to Asynchronous JavaScript And XML. It involves writing an XMLHTTPRequest to retrieve the contents from a server.
If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery.
So, in your case, it is not necessary to use AJAX. You can accomplish this with a bit of code in JavaScript.
"Creating a 2 level interdependent select list" might help.