We Keep Coding

How to disable the options in jquery chosen page load event?

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();

Multiple options from one drop down giving alternate results - Javascript/html

I'm looking to have separate sections of my form become visible dependant on the selection from a drop down menu.
Currently i'm having two issues, its only hiding the first area i want hidden and also i'm struggling with the syntax to get the multiple options working using if statements.
Am i looking at this the right way or is there an easier way of doing this.
In the code below i've only got 2 if statements as i've been struggling to get that correct so haven't done it for all 8 options i need to.
function showfield(name){
if (name=='Supplier meetings') {
document.getElementById('div1').style.display="block";
} else {
document.getElementById('div1').style.display="none";
if (name=='Product meetings') {
document.getElementById('div2').style.display="block";
} else {
document.getElementById('div2').style.display="none";
}
}
}
function hidefield() {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
document.getElementById('div5').style.display='none';
document.getElementById('div6').style.display='none';
document.getElementById('div7').style.display='none';
document.getElementById('div8').style.display='none';
}
in my html i have:
<body onload="hidefield()">
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1">Worked hours</option>
<option value="2">Overtime</option>
<option value="3">Sickness</option>
<option value="4">Unpaid leave</option>
<option value="5">Compassionate leave</option>
<option value="6">Holiday inc bank holidays</option>
<option value="7">Team meetings</option>
<option value="8">One to ones</option>
<option value="9">One to one prep</option>
<option value="10">Huddles</option>
<option value="Supplier meetings">Supplier meetings</option>
<option value="Product meetings">Product meetings</option>
<option value="Training/coaching">Training/coaching</option>
<option value="Handling other peoples cases">Handling other peoples cases</option>
<option value="15">Project work</option>
<option value="16">Surgery time for GK</option>
<option value="17">Letter checks and feedback</option>
<option value="18">MI/Reporting/RCA</option>
</select>
Then divs that contain the parts i need displayed off each option.
Hope that makes sense.
Thanks

Instead of writing condition for each option value, you can use the value directly in selecting the div that is to be shown:
function showfield(name){
hidefield();
document.getElementById( 'div-' + name).style.display="block";
}
For this to work, your id's should match up with corresponding option values.
e.g. <option value="1">1</option>
corresponding div:
<div id="div-1"></div>

You can add a data-div attribute to every option which will be ID of respective div which will be shown and other divs will be hidden.
You need a class on every div so they can be hidden using that class name except the div which will be shown based on selection.
HTML
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1" data-div="one">Worked hours</option>
<option value="2" data-div="two">Overtime</option>
</select>
<div id="one">First Div</div>
<div id="two">Second Div</div>
Javascript
function showfield(val)
{
var divID = $("select[name=acti]").find("option[value='" + val + "']").attr("data-div");
$(".divClass").hide();//You can also use hidefield() here to hide other divs.
$("#" + divID).show();
}

Javascript onchange function

I know this going to be a very basic question, but please be patient with me as I have just started using js and jquery.
Here is my part of code -
<html>
<head>
</head>
<body>
<form method="post" action="module.php">
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
<option value > Select Duration </option>
<option value="/module.php/?dateRange=1d">Last 24 Hours</option>
<option value="/module.php/?dateRange=2d">Last 2 Days</option>
<option value="/module.php/?dateRange=1w">Last Week</option>
<option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
<option value="/module.php/?dateRange=1m">Last Month</option>
<option value="/module.php/?dateRange=3m">Last 3 Months</option>
<option value="/module.php/?dateRange=6m">Last 6 Months</option>
<option value="/module.php/?dateRange=1y">Last Year</option>
<option value="/module.php/?dateRange=all">All</option>
</select>
</form>
</body>
</html>
now I am not understanding how to write a onchange function where I can do all my query and dispplay my result when user selects any value from the dropdown list. And after that I would like to store the selected value in a variable and use that value in the same page ?

Lets say you give an id called mySelect to your select input.
Then you can define:
<script type="text/javascript">
$('#mySelect').on('change', function () {
// do your thing
});
</script>
The above attaches an onchange event (jQuery) to your element and will be triggered every time a user changes the selection.

you will use a handler
<html>
<head>
</head>
<body>
<form method="post" action="module.php">
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
<option value > Select Duration </option>
<option value="/module.php/?dateRange=1d">Last 24 Hours</option>
<option value="/module.php/?dateRange=2d">Last 2 Days</option>
<option value="/module.php/?dateRange=1w">Last Week</option>
<option value="/module.php/?dateRange=2w">Last 2 Weeks</option>
<option value="/module.php/?dateRange=1m">Last Month</option>
<option value="/module.php/?dateRange=3m">Last 3 Months</option>
<option value="/module.php/?dateRange=6m">Last 6 Months</option>
<option value="/module.php/?dateRange=1y">Last Year</option>
<option value="/module.php/?dateRange=all">All</option>
</select>
</form>
<script>
$( document ).ready(function() {
$( "select" )
.change(function () {
alert('OnChange happened');
//you can add your stuff here
});
})
});
</script>
</body>
</html>

I have created you a fiddle :)
it uses
$('#duration').on('change', function () {
var selectedEl = $('#duration').val();
console.log(selectedEl);
});
To detect a change in select and val() to get the selected option.

Instead of this :
<select name="dateRange" size="1" onchange="window.location=this.options[this.selectedIndex].value">
Try This :
<select name="dateRange" size="1" onchange="submit();">
And in 'MODULE.php' get the selected value using :
$var = $_POST['dateRange'];
echo $var;
And then write your query..

Show specific content based on 4 drop-down selections

I've managed to source some code to achieve the above, however, despite several attempts, I cannot get it to work. Could anyone please assist me on this?
JS in HEAD of HTML file:
<script type="text/javascript">
jQuery(function($){
selects = $('#select-container select'),
results = $('#results-container > div');
selects.change(function(){
var values = '';
selects.each(function(){
values += '.' + $(this).val();
});
results.filter(values).show().siblings().hide();
});
});
</script>
HTML in BODY of HTML file:
<div class="margins1"><h2>Goal</h2>
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='Fat Loss'>Fat Loss</option>
<option value='Lean Muscle'>Lean Muscle</option>
<option value='Size & Mass'>Size & Mass</option>
</select>
<h2>Dietary Requirements</h2>
<select>
<option value='none'>Select Option</option>
<option value='No Requirements'>No Requirements</option>
<option value='Vegetarian'>Vegetarian</option>
<option value='Vegan'>Vegan</option>
<option value='Gluten Free'>Gluten Free</option>
<option value='Gluten Free (vegetarian)'>Gluten Free (vegetarian)</option>
<option value='Gluten Free'>Gluten Free (vegan)</option>
<option value='Dairy Free'>Dairy Free</option>
<option value='Dairy Free (vegetarian)'>Dairy Free (vegetarian)</option>
<option value='Dairy Free (vegan)'>Dairy Free (vegan)</option>
<option value='Nut Free'>Nut Free</option>
<option value='Nut Free (vegetarian)'>Nut Free (vegetarian)</option>
<option value='Nut Free (vegan)'>Nut Free (vegan)</option>
<option value='Supplement Free'>Supplement Free</option>
<option value='Supplement Free (vegetarian)'>Supplement Free (vegetarian)</option>
<option value='Supplment Free (vegan)'>Supplement Free (vegan)</option>
</select>
<h2>Type of Day</h2>
<select>
<option value='none'>Select Option</option>
<option value='Non-Back-Load Day (10-Day Prep/CNS)'>Non-Back-Load Day (10-Day Prep/CNS)</option>
<option value='Back-Load Day (10-Day Prep/CNS)'>Back-Load Day (10-Day Prep/CNS)</option>
<option value='Non-Back-Load Day (CBL)'>Non-Back-Load Day (CBL)</option>
<option value='Back-Load Day (CBL)'>Back-Load Day (CBL)</option>
</select>
<h2>Cooking Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Minimal Cooking'>Minimal Cooking</option>
<option value='Moderate Cooking'>Moderate Cooking</option>
<option value='Maximum Cooking'>Maximum Cooking</option>
</select></br>
</div>
Here is the rest of the HTML code that assigns combinations of drop-down selections to a piece of text. I have only done one example:
<div class="margins2"><h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat Loss No Requirements Back-Load Day (CBL) Moderate Cooking'> IT WORKS</div>
</div>
The second div class has 4 inputs. It looks strange without commas or separate '' marks but the tutorial doesn't include these and it works. Finally, here is some code from my EXTERNAL CSS file:
#results-container > div { display: none; }
Can anyone please assist me in fixing the issue of no text displaying or identify why this is happening? The JSFiddle link of the tutorial of what I want to achieve can be found here: http://jsfiddle.net/chnZP/
Many thanks

The problem seems to be in how the values in the drop-down lists are written. Because values are directly used as class names you are restricted in your choice of special characters.
Following the tutorial example, if you select alpha, blue and dog the script will turn this into a string ".alpha.blue.dog" and then select the elements containing those 3 class names using the .filter() method.
Because the string is sent to jQuery to manage it has to follow a strict syntax. This means you cannot using spaces, backslashes, parentheses (...and so on) in your class names because they will be parsed differently.
Editing the code slightly will fix it. http://jsfiddle.net/AjdHa/7/
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='Fat_Loss'>Fat Loss</option>
</select>
<h2>Dietary Requirements</h2>
<select>
<option value='none'>Select Option</option>
<option value='No_Requirements'>No Requirements</option>
</select>
<h2>Type_of_Day</h2>
<select>
<option value='none'>Select Option</option>
<option value='Non-Back-Load_Day_CBL'>Non-Back-Load Day (CBL)</option>
</select>
<h2>Cooking Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Minimal_Cooking'>Minimal Cooking</option>
<option value='Moderate_Cooking'>Moderate Cooking</option>
<option value='Maximum_Cooking'>Maximum Cooking</option>
</select>
</div>
<div class="margins2">
<h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat_Loss No_Requirements Non-Back-Load_Day_CBL Moderate_Cooking'>
IT WORKS
</div>
</div>
</div>

Html and javascript <select> tags with filtering

I will try to be as specific as I can.
So I need to create a selector that filters the options.
I have:
types of cars
The places where you can drive those cars.
So for example you would select > Ferrari > then the correct areas on the second select tag show up
I.e. Select > Ferrari = London, Cambridge, Devon, New hampshire
Select > Lamborghini = London, Bertshire, Oakwood,
And then finally
they choose (Ferrari + Cambridge) and then press "go" and jump to the final link that will take them to the right page.
My code is:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
<script type='text/javascript'>//<![CDATA[
$('#filter-regions').on('click', function() {
var pilotage-carFilter = $('#pilotage-car').text();
var itemFilter = $('#items').text();
console.log('pilotage-carFilter: ' + pilotage-carFilter);
console.log('itemFilter : ' + itemFilter);
console.log('Applying filter now...');
featureList.filter(function(item) {
console.log('Running filter() on item: ('+item+')');
console.log('item.values().pilotage-car: ' + item.values().pilotage-car);
console.log('item.values().item: ' + item.values().item);
return
(pilotage-carFilter==='Ferrari' || item.values().pilotage-car === pilotage-carFilter)
&& (itemFilter==='All items' || item.values().item === itemFilter);
});
return false;
});
//]]>
</script>
</head>
<body>
<form id="filter">
<select id="pilotage-car" name="pilotage-car" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-BN-5iZ5.aspx?SqNo=5iZ5&cm_sp=LHN-_-Voiture-_-Ferrari&cm_re=Ferrari-_-Voiture-_-LHN">Ferrari</option>
<option value="Porsche">Porsche</option>
<option value="Lamborghini" selected>Lamborghini</option>
<option value="Mustang">Mustang</option>
<option value="Audi" selected>Audi</option>
<option value="Multivolants">Multivolants</option>
<option value="Rallye">Rallye</option>
<option value="Subaru">Subaru</option>
<option value="Karting">Karting</option>
<option value="4x4">4x4</option>
<option value="Moto">Moto</option>
<option value="Quad">Quad</option>
<option value="Buggy">Buggy</option>
<option value="Renault Sport">Renault Sport</option>
<option value="Prototype">Prototype</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Corvette">Corvette</option>
</select>
<select id="items" name="items" size="1">
<option value="http://www.coolcadeau.fr/Stage-de-pilotage-Ferrari-Alsace-BN-5iZ5Z1z13skq.aspx?SqNo=5iZ5Z1z13skq&cm_sp=LHN-_-Region-_-Alsace&cm_re=Alsace-_-Region">A l'étranger</option>
<option value="Alsace">Alsace</option>
<option value="Aquitaine" selected>Aquitaine</option>
<option value="Auvergne">Auvergne</option>
<option value="Basse-Normandie" selected>Basse-Normandie</option>
<option value="Bourgogne">Bourgogne</option>
<option value="Bretagne">Bretagne</option>
<option value="Centre">Centre</option>
<option value="Champagne-Ardenne">Champagne-Ardenne</option>
<option value="Franche-Comté">Franche-Comté</option>
<option value="Haute-Normandie">Haute-Normandie</option>
<option value="Ile-de-France">Ile-de-France</option>
<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
<option value="Limousin">Limousin</option>
<option value="Lorraine">Lorraine</option>
<option value="Midi-Pyrénées">Midi-Pyrénées</option>
<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
<option value="Pays de la Loire">Pays de la Loire</option>
<option value="Picardie">Picardie</option>
<option value="Poitou-Charentes">Poitou-Charentes</option>
<option value="Provence-Alpes-Côte d'Azur">Provence-Alpes-Côte d'Azur</option>
<option value="Rhône-Alpes">Rhône-Alpes</option>
</select>
<input id="go-button" type="button" name="test" value="Go"/>
</form>
Im really not sure about javascript at all.
How could I, and/or what is the best way I could achieve this? Are there any examples out there?
EDIT: I found something like this http://jsfiddle.net/dtAgX/1/
But i need a sumbit button that will link to the right page based on selection.
Thanks in advance

You have several options depending on your backend, PHP, ASP ect. or plain HTML.
If you use PHP/ASP you can provide an 'action' and a 'method' for your and have the server provide the correct page, depending on the values of your selects.
If you use plain HTML, you can add an 'onsubmit' event to your and have a javascript redirect to the correct page.
In both cases the "go-button" should be of type "submit".
If you want more help I'll need to know more about your setup :-)
Also, can all cars be driven at all locations?