here's my code below. On page load, all multiselect are disabled but once the user click the enable button, all multiselect should be enable. Here's my code below. I'm not able to make this work, I wonder why. But if I add "$('#multidiv option').prop('disabled', false);" on first load, it works, but all my multiselect will be enabled on first load. I want to disabled all on first load but enable all by clicking a button. Thanks.
<div id="multidiv">
<label style="float:left; margin-right:-2px;">Target Android Device</label>
<div class="span5" style="display:inline-block; float:left;">
<select id="android" disabled="disabled" multiple="multiple" name="android[]">
<option value="Nexus">Nexus</option>
<option value="HTC">HTC One</option>
<option value="Sony">Sony Xperia</option>
</select>
</div>
</div>
My javascript code below:
$('#enable_button').on("click",function(){
$('#multidiv option').prop('disabled', false);
});
$('#android').multiSelect(); //using "http://loudev.com/" plugin
I've found the solution to my problem.
This $('#multidiv option').removeAttr('disabled'); code actually works. It's the plugin problem.
By adding $('#android').multiSelect('refresh'); it works fine now. The plugin needs to be refreshed after this code $('#multidiv option').removeAttr('disabled');
Thanks for all for trying to help btw.
Why not use the id of the <select> itself:
$('#enable_button').on("click",function(){
$('#android option').removeAttr('disabled');
});
you can use this script;
$('#android').multiselect('disable');
and
$("#android").multiselect('enable');
its work for agungpanduan.com
Related
Using the chosen lib I run into the following issue, you can reproduce it yourself by going to their show-and-tell-page:
https://harvesthq.github.io/chosen/
Steps to reproduce:
In their standard select section, select -any country you want- in both the standard dropdown and the chosen dropdown
Click 'fork on github'(or any link) to leave the page
Navigate back by hitting the back button in chrome
The standard dropdown shows you the previously selected country
The chosen dropdown is empty (but under the hood the value is selected, according to what I'm seeing with my form. It just is not showing)
So this leads to confusion. When the user would back and then go forward again by submitting the form(in my case) it would use another value than what is shown.
My form basically looks like:
<form id="myForm" action="${home}mySite/foo/bar" method="GET">
<select id="bar" name="barName" class="chosen-select">
<option value="a">foo 1</option>
<option value="b">foo 2</option>
<option value="c">foo 3</option>
<option value="d">foo 4</option>
</select>
<input type="submit" value="Continue"/>
</form>
If I remove the class="chosen-select" it works as I expect, but I lose chosen's nice search feature which I want. I've tried messing around with
<option value="a" selected="selected">Foo 1</option>
in the dropdown, but that doesn't help.
I've also tried changing the method="GET" to POST but there is no difference in behaviour. It still works as in the example link I provided.
The chosen lib generates the following in on the page:
<div class="chosen-container chosen-container-single" title="" id="parkingZoneOwner_chosen" style="width: 40%;"><a class="chosen-single">
<span>Foo 1</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
But nothing about the generated html looks wrong to me, even after backing to the page.
I tried this in the js (events):
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(".chosen-select").chosen({
width: "40%",
search_contains: true
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
$(".chosen-select").val("a");
});
});
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
// alert("reached")
// I had really high hopes for this one:
$('.chosen-select').trigger('chosen:updated');
//Also tried this one:
$('#myForm')[0].reset();
});
Anyone know a way to fix this? Either the chosen dropdown needs to show what actually will be submitted in the form or the entire form maybe could be reset to default values somehow.
This solved it in the end, turning off autocomplete on the form.
<form id="myForm" action="${home}mySite/foo/bar" autocomplete="off" method="GET">
I don't know why this works.
Upon using bootstrap, when I try to disable the drop down list on my page, it does get disabled, however, does not greyed out. Commenting out the bootstrap dependency gets it to work fine.
How can I use bootstrap, and the still have my drop down greyed out upon disabling. Please see my jsbin here.
There is no Error in Your Code, it is working fine in your jsbin.
Just click on Run with JS click on Disable then click on Select element. it is disabled, The center box is for jsbin setting. you can not apply your code on it. don't click on CSS select.
Just remove
<script>
window.onload = init;
</script>
Because it is not defined and generate error.
Just see this simple code working Here
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>
I have made a dropdown in my site and added background image to it. I can see it fine in Firefox, but not able to see it using Chrome or IE.
Here is:
my site
On the very top you can see a search icon. Upon hovering that you can see a pop out. Inside that I am using a dropdown.
You can see the images showing fine in Firefox but not using any other browser.
:
Here is the select dropdown code I used:
My JS
function goToNewPage(dropdownlist){
var url = dropdownlist.options[dropdownlist.selectedIndex].value;
if (url != ""){
window.open(url);
}
}
My HTML
<form name="dropdown">
<label>I am Looking for</label>
<img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
<select accesskey="E" name="list">
<option selected="">Please select one</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
</select>
<input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>
You can't do it in webkit (Google) browsers. You will need an alternative solution with ul and li elements.
http://getbootstrap.com/components/#dropdowns
Sorry Got your Problem. The code you are using only works with Firefox and Webkit browsers. You either have to use JQuery UI for yuor need, or you can also some code at this link
My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.
I'm trying to do a very simple thing: with the jQuery Mobile 1.1.1 framework, I'd like to disable a field when a toggle flip is on "manual".
Here is the HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="toggleswitch">
</label>
<select name="toggleswitch" id="toggleswitch" data-theme="b" data-role="slider">
<option value="off">gps</option>
<option value="on">manual</option>
</select>
</fieldset>
</div>
and here is my JavaScript:
$('#toggleswitch').change(function(){
console.log("toggle");
});
At the moment, I can't even see the "toggle" word in the console. I think the change method doesn't even fire, but this is what I found in the online examples.
EDIT - I copied here a wrong example: the code I actually tested has the same "toggleswitch" id. The code is now edited the way I have it on my notepad++.
Your id on the select element is toggleswitch3, but in the JavaScript code you use toggleswitch. The names need to match in HTML and JavaScript, otherwise it can't work.
Did you put the code in the dom ready callback?
$(function() {
$('#toggleswitch').change(function(){ console.log("toggle"); });
});
PS: If you use id selector, no need to specify the element type.
Edit:
Also note you are using toggleswitch3 in the html as id, while using toggleswitch in the javascript.