Hidden value not working in Chosen - javascript

If I use combobox like this :
<select>
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option></select>
</select>
Hidden value working. Value three hidden.
But, I use Chosen like this :
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<select class="chosen-select">
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option>
</select>
<script type="text/javascript">
$(".chosen-select").chosen();
</script>
Hidden value not working. Value three not hidden.
How do I get Chosen to hide an option with the hidden attribute set as in three?

Related

Output is not my ideal thing

Output is not my ideal thing.I wanna make drill down buttons.
Now output is
index.html is
<html> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">
</head>
<body>
<select data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
</body>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
</html>
I wanna make only 2 drill down buttons in index.html .And if I select A in first button,a-1~4 is shown in second button.If I select B in first button,b-1~5 is shown in second button.If I select C in first button,c-1~2 is shown in second button・・・・.
So output now is different form my ideal one.I use Chosen in jQuery plugin. Why can't I do my ideal this? What is wrong? Why can't I filter to second button?
Hope this helps..
<html> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">-->
</head>
<body>
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
<script type="text/javascript">
// $(".chzn-select").chosen();
// $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function () {
$('#mainDD').on('change', function() {
console.log($(this).val());
console.log($('#mainDD :selected').text()) ;
var thisType = "type" + $(this).val();
for(i=1; i<5; i++) {
var thisId = "type" + i;
console.log(thisType + " " + thisId);
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
})
});
</script>
</body>
</html>

Convert <select> into <ul>, but keep functionality

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>

Bootstrap multiselect dropdown is not visible

Despite the fact that I can make this bootstrap-multiselect work in independent file, I'm not able to see the dropdown list once I click on caret, even if I included it in portal files.
I have already used bootstrap-datepicker, datetimepicker, chosen, and backbone.js
This is the line which is supposed to do the trick
$('.insightList').multiselect({
selectAllText: true
});
Does anyone have an idea of what can be the cause for not adding class 'open' for 'btn-group'?
![On click also there is only btn-group class for div whether it should add open class][1]
Thanks in advance
I've just created a jsbin to solve your problem Working demo.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<meta charset="utf-8">
<title>Example by #Bneiluj</title>
</head>
<body>
<select id="insightList" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<script id="example">
$('#insightList').multiselect({
enableClickableOptGroups: true
});
</script>
Please, let me know if you have any question.
Check the Occurrence of the
Bootstrap.js
Bootstrap-select.js
Bootstrap-multiselect.js
if one of them exist more then 1 times then the dropdown will not displayed
Make sure your HTML structure for the dropdown is as follows:
<select id="example-selectAllText" multiple="multiple" style="display: none;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Check all!</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Option 1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Option 2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3"> Option 3</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="4"> Option 4</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="5"> Option 5</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="6"> Option 6</label></a></li></ul></div>
$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});
This is the simple multi select am trying to build with the same bootstrap multiselect I have loaded all the necessary jquery and css but still it shows a select box displaying all the options it has not as proposed in above solution.
<select id="multi-select" name="field" multiple="multiple" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- initialize multiselect -->
<script>
$(document).ready(function() {
$('#mult-select').multiselect();
});
</script><!-- //ends-->

How to make date selection using javascript fromat?

In my PHP project I'm using 3 comboboxes to select Year, month and date. But I can't format that 3 values to save as a date in database in 2013-10-01 type. Given below is my code to select date.
<p>
<label class="floated" for="dtb_yr"><b>Date of Birth :</b></label>
<select name="dtb_yr">
<option value="2013" />2013
<option value="2014" />2014
<option value="2015" />2015
<option value="2016" />2016
<option value="2017" />2017
<option value="2018" />2018
<option value="2019" />2019
<option value="2020" />2020
<option value="2021" />2021
<option value="2022" />2022
</select>
<select name="dtb_mon">
<option value="january" />January
<option value="february" />February
<option value="March" />March
<option value="Apirl" />Apirl
<option value="May" />May
<option value="June" />June
<option value="July" />July
<option value="August" />August
<option value="September" />September
<option value="October" />October
<option value="November" />November
<option value="December" />December
</select>
<select name="dtb_day">
<option value="01" />01
<option value="02" />02
<option value="03" />03
<option value="04" />04
<option value="05" />05
<option value="06" />06
<option value="07" />07
<option value="08" />08
<option value="09" />09
<option value="10" />10
<option value="11" />11
<option value="12" />12
<option value="13" />13
<option value="14" />14
<option value="15" />15
<option value="16" />16
<option value="17" />17
<option value="18" />18
<option value="19" />19
<option value="20" />20
<option value="21" />21
<option value="22" />22
<option value="23" />23
<option value="24" />24
<option value="25" />25
<option value="26" />26
<option value="27" />27
<option value="28" />28
<option value="29" />29
<option value="30" />30
<option value="31" />31
</select>
<br class="clear"/>
</p>
Is there any way to select date and save date in more accuracy way, like given below textfeild?
<p>
<label class="floated" for="model_no"><b>Model no :</b></label>
<input type="text" name="model_no" id="model_no" placeholder="Enter Modle No" />
<br class="clear" />
</p>
You can use Jquery Date picker that you only need to select date and it can be save in specified format in database.
Add this code in head of your HTML document.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dtb_yr" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
Add this in your form
in HTML:
<input type="text" name="dtb_yr" id="dtb_yr" placeholder="Select Date" />
Add this code in PHP file
In PHP:
$dtb_yr = $_POST['dtb_yr'];
use Month option like this
<select name="dtb_mon">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">Apirl</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
after submit your form
<?php
$date_string=$_POST['dtb_yr']."-".$_POST['dtb_mon']."-".$_POST['dtb_day'];
?>
Rather than using 3 different combo boxes to format your date, I think it might be easier to use a single text field with Jquery UI's datepicker. http://jqueryui.com/datepicker/#date-formats
For the format you are looking for, you can customize the datepicker's output. The documentation covers this quite well.
If you really want 3 different boxes, Zahidul's answer should work.
EDIT
Use this code as a guide:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", "dd mm yy" );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"></p>
The important part is $( "#datepicker" ).datepicker( "option", "dateFormat", "dd mm yy" ); where you are formatting the date according to your needs.
You can use the values that you get and at the PHP side you can use STR_TO_DATE function of MYSQL.you need a little mapper for having the month number from the text. Then you use this function--->get the output and use it for insertion in your database.check out the article here http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_str-to-date
STR_TO_DATE('01,5,2013','%d,%m,%Y');
BTW, theres a typo in April.

Chosen is not styling my select drop-down properly

Here is my code:
<link href="Content/chosen.css" rel="stylesheet" type="text/css"/>
<div>
<select id="chzn-select" data-placeholder="Select an option...">
<option value=""></option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<script type="text/javascript" src="../Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../Scripts/chosen.jquery.js"></script>
<script type="text/javascript" src="../Scripts/chosen.jquery.min.js"></script>
<script type="text/javascript">
$("#chzn-select").chosen();
</script>
This is the result:
I can "select" Option 1 or Option 2, and they will appear where the "Select an option..." label is.
Please try below code, it working for me.
<link href="http://harvesthq.github.com/chosen/chosen/chosen.css" rel="stylesheet" type="text/css"/>
<div>
<select id="chzn-select" data-placeholder="Select an option...">
<option value=""></option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
</select>
</div>
<script type="text/javascript">
$("#chzn-select").chosen();
</script>
Here is the JSFIddle (working demo of your code)
chosen.jquery.js was included twice in your code. Also i think chosse.css path need to be corrected in your code as per your directory structure.

Categories