I am using the DDSlick plugin in my website. Everything is fine, I just want to add a filter type of thing in which there is a textbox on top. On entering text it will filter the results.
My current list box:
<select name="test">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
After using DDSlick plugin it becomes:
<ul class="dd-options dd-click-off-close" style="width: 260px; display: block;">
<li>
<a class="dd-option dd-option-selected">
<input class="dd-option-value" type="hidden" value="-1">
<label class="dd-option-text">Please Select From List</label>
</a>
</li>
<li>
<a class="dd-option">
<input class="dd-option-value" type="hidden" value="26">
<img class="dd-option-image" src="http://localhost/fifa/admin/server/packs/files/large-gold-if%20%284%29.png">
<label class="dd-option-text">test</label>
<small class="dd-option-description dd-desc">test</small>
</a>
</li>
</ul>
I believe DDslick does not have the feature that you are looking for.
I would recommend you bootstrap-select plugin. Check it out here. Lookup for the example that is using data-live-search="true".
Related
Is it possible to create a multi-select checkbox dropdown like this in Bootstrap, HTML and JavaScript.
I have tried I couldn't able to achieve it. I'm new to JavaScript as well However I'm just exploring the JS and make it to work but this seems really challenging for me. I don't know how to implement JS script for this.
For instance: If the user selects the countries in the multiselect checkbox I want it to show it all countries name instead of Choose option.
code:
<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
<div class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
<span id="selected">Choose option</span><span class="caret"></span></a>
<ul id="id_country">
<li><label for="id_country_0"><input type="checkbox" name="country" value="US"
placeholder="Select Country" id="id_country_0" onclick="filter_type();">
US</label>
</li>
<li><label for="id_country_1"><input type="checkbox" name="country" value="India"
placeholder="Select Country" id="id_country_1" onclick="filter_type();">
India</label>
</li>
<li><label for="id_country_2"><input type="checkbox" name="country" value="Japan"
placeholder="Select Country" id="id_country_2" onclick="filter_type();">
Japan</label>
</li>
<li><label for="id_country_3"><input type="checkbox" name="country" value="UK"
placeholder="Select Country" id="id_country_3" onclick="filter_type();">
UK</label>
</li>
</ul>
</div>
js fiddle here: http://jsfiddle.net/shalman44/92drs7ax/3/
Since you are already using bootstrap, you might aswell want to use jQuery.
There is a plugin called bootstrap-select for achieving a multi select like in your example, where the syntax is as follows:
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
$(function () {
$('select').selectpicker();
});
You might also want to have a look at this question.
I just searched google with "bootstrap multiselect" and i found this codepen
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<div class="">
<strong>Select Language:</strong>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
</div>
I have an issue. I am trying to append option tag dynamically but its not coming properly using Jquery/Javascript.Here also I am using bootstrap chosen-select class. I am explaining my code below.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
My javascript code is given below.
var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
var obj=JSON.parse(data);
if(obj.isData==1){
$('#ctid').find('option').not(':first').remove();
$.each(obj.cid, function() {
$("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
})
}
})
Here also i am getting the data properly and the loop is also running.But its not reflecting at front end.when I did inspect element i got the below generated html code.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>
The raw html code is generating the above part after option added dynamically.But my problem is thosze are not display on the front end view.Please help me to resolve thisz issue.
I think each loop every object and gives index as its first param and val as second, try this:
$.each(obj.cid, function(idx, o) {
$("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});
If you would like to get the options in the resulting ul, then make sure to append them first before initing chosen.
$.each(obj, function(idx, o) {
$("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});
$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();
HTML
<div class="popover-content">
<p>
<select class="text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
Hope this helps
I was trying out getmdl-select with Vue2.0. in the view, I got it correct and working as expected, but it is not changing the model associated. Here is the code:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth">
<input class="mdl-textfield__input" id="age" name="age" v-model="age" type="text" readonly tabIndex="-1" data-val="1"/>
<label class="mdl-textfield__label" for="age">Age</label>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="age">
<li class="mdl-menu__item" data-val="1">1 Month Old</li>
<li class="mdl-menu__item" data-val="11">11 Month Old</li>
</ul>
</div>
I have put v-model="age" with input field as given above, but age variable is not updating when selecting values from dropdown.
However vanilla select input works fine:
<select v-model="age">
<option value="" disabled hidden>Select Age</option>
<option value="1">1 Month Old</option>
<option value="11">11 Month Old</option>
</select>
I tried to created a fiddle of this, however in fiddle, UI is not coming properly, in local at-least UI works properly.
Please let me know what am I doing wrong here.
try to use v-model.lazy
<input type="text" v-model.lazy="age"/>
docs
Looking to add "ALL" to an option with the Value of "79" with Javascript or JQuery
<select id="locations">
<option value="79"></option>
</select>
End Result should be:
<select id="locations">
<option value="79">ALL</option>
</select>
Thanks for any help :)
EDIT:
Turns out I also need it done to an checkbox too.
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span></span>
</label>
</li>
Again the end result should be:
<li class=" ">
<label for="ui-multiselect-Location_State-option-14" title="" class="ui-corner-all">
<input id="ui-multiselect-Location_State-option-14" name="multiselect_Location_State" type="checkbox" value="79" title="Maidstone2">
<span>ALL</span>
</label>
</li>
The value is still "79" however the code for the first option didnt work on it.
Thanks again for any help!
You can access the element using attribute selector and set the text using text() method as follows:
$('option[value="79"]').text("ALL");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="locations">
<option value="79"></option>
</select>
or without jQuery:
document.querySelector('option[value="79"]').textContent = "ALL";
You can use attribute-equals-selector:
$('option[value=79]').text('ALL');
I have the following problem I have a dropdown on my website. But because I wanted to add style to it, I hid it and have a bootsrap dropdown showing over it.
This is my html structure:
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
I'm trying to change the text Maat_dames to simply just Maat, I've tried the following jQuery code:
if(jQuery('span .filter-option').length == 0){console.log("fail")}
if(jQuery('span .filter-option.pull-left').length == 0){console.log("fail")}
if(jQuery('span .filter-option .pull-left').length == 0){console.log("fail")}
When I check the console log, it returns fail in all three cases, so the element isn't found. Why is that the case?
EDIT
All the answers suggest removing the space between span and .filter-option and while it doesn't work on my site, it does work when I try to run the code snippets in the comments en when I try to recreate it in a JSFiddle.
Could it be the case that jQuery can't find the element since it is dynamically created by a plugin?
You are using a descendant combinator (a space).
span .filter-option means any element that is a member of the class filter-option and has an ancestor that is a span.
The only elements which are members of that class in your document are spans themselves and do not have ancestors that are also spans.
Remove the spaces from the selectors.
if(jQuery('span.filter-option').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
if(jQuery('span.filter-option.pull-left').length == 0){console.log("fail")}else{console.log('success'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input-box">
<select name="super_attribute[139]" id="attribute139" class="required-entry super-attribute- select selectpicker" style="display: none;">
<option value="">Maat_dames</option>
<option value="44" price="0">s</option>
<option value="43" price="0">m</option>
<option value="42" price="0">l</option>
<option value="41" price="0">xl</option>
<option value="40" price="0">2xl</option>
<option value="39" price="0">3xl</option>
<option value="38" price="0">4xl</option>
</select>
<!-- The normal dropdown -->
<!-- The bootstrap dropdown -->
<div class="btn-group bootstrap-select required-entry super-attribute-select">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="attribute139" title="Maat_dames">
<span class="filter-option pull-left">Maat_dames</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-normalized-text="<span class="text">Maat_dames</span>">
<span class="text">Maat_dames</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
Replace jQuery('span .filter-option') with jQuery('span.filter-option').
Currently jQuery('span .filter-option') is finding element with class filter-oprion inside span tags in DOM.
When you write jQuery('span.filter-option') it will find span elements with class filter-option in DOM.
('span.filter-option').length maybe?