I have this select drop-down where in my drop-down when i select one of the choices the div for that particular choice will be displayed and the rest will remain hidden.
I tried using this Demo but it don't work.
<form id="nl-form" class="nl-form">
<select id="choices">
<option value="family" selected>family</option>
<option value="closefriend">close friend</option>
<option value="acquaintance">acquaintance</option>
</select>
<div class="nl-overlay"></div>
</form>
<div id="family" class="chosentree">family</div>
<div id="closefriend" class="chosentree">closefriends</div>
<div id="acquaintance" class="chosentree">acquaintance</div>
$(function() {
$('.chosentree').hide();
$('#choices').change(function(){
//$('.chosentree').hide();
$('#' + $(this).val()).show();
});
});
What could be the problem?
and also on the div family, I want to place this ff. Demo how should it be done? Notice that it has a link script file check external sources in jsfiddle
I'm new with this and I don't know what should be the proper placing of codes.
your code need
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// you can add what ever is latest version available.
since you have written change event better add a dummy select option like:
<option value="select" selected>select</option>
otherwise it is working.
Here is your working demo after loading above library
FiddleDemo
I solved it by putting
$(this.elOriginal).find('option').removeAttr("selected");
$(this.elOriginal).find('option:eq('+this.selectedIdx+')').attr("selected", "selected");
$(this.elOriginal).trigger('change');
in close function in nlform.js
Then by listening to change event of the select element I get my goodies!
Not sure if this is still relevant, but nl-form doesn't actually use the select inputs. If you observe the page in Firebug, you'll notice the actual Select elements have a visibility of "none". What nl-form does is actually take the options in the select that you create and turns them into a series of different html elements (div, a, and ul elements). So when you change an option on an nl-form select, you cannot listen for the change event because it doesn't actually happen.
It turns out it's not real easy or fun to do. What I did to monitor the changes was create a custom event at the bottom of the close() method in nlform.js. Then in my javascript, I listened for that particular event and had to write a lot of javascript to find the elements I needed...it did eventually work. It's a lot of work though.
Related
I am using Chosen to give my <select> a proper look and a search input.
The problem is that with a <select multiple> when the user open the dropdown menu to choose the options he wants I want to keep the dropdown open between the clicks. It is really annoying to have the re-open the menu between each option selection.
I searched through the Chosen documentation and through the internet but I couldn't find to do it with Chosen.
Here is how I wrote my <select> and how applied Chosen to it (nothing special) :
<select multiple="multiple" id="foo" class="chosenSelect">
<option value="NULL" disabled>Chose multiple somthing</option>';
<option value="bar1">foobar1</option>';
<option value="bar2">foobar2</option>';
<option value="bar3">foobar3</option>';
</select>
and
$('.chosenSelect').chosen();
Any help is welcomed.
Set hide_results_on_select to false.
I am not familiar with the Chosen library; so if there exists a better solution in the library itself, I'd defer to that solution.
However, if you do not find a better solution, and you still need the functionality, you can use this little hack.
$('.chosen-results').bind('click', function(e) {
setTimeout(function() {
$(e.currentTarget).parent().siblings('.chosen-choices').click()
});
});
I reiterate, this is a hack and you should only use this if you've found nothing else. I'll edit the answer if I find something better.
Add a click trigger to the change event
$("select").chosen().change(function() {
$(".search-field").trigger("click")
})
I agree with the solution #squgeim posted.
However, after I selected something, the search criteria don't get kept. If I have a super long dropdown list, the scroll bar will bounce to the top.
In order to keep my previous search criteria, I made some update on #squgeim's answer:
//restore previous search value
var chosenSearchValue = "";
$(".chosen-container-multi .search-field input").keyup(function(){
chosenSearchValue = $(this).val();
})
//make chosen multiple select dropdown menu stay open after click
$('.chosen-results').bind('click', function(e) {
if (chosenSearchValue){
$(this).parents(".chosen-container-multi").find(".search-field input").val(chosenSearchValue);
}
setTimeout(function() {
$(e.currentTarget).parent().siblings('.chosen-choices').click();
});
});
Just use set hide_results_on_select to false if you want to keep showing the dropdown after chosing in option
I'm trying to use the first 'option' of a 'select' tag as a prompt to the user that input is required. So, I'd like the 'select' box to render the selection in a different color if the selected option is disabled.
So given the following code:
<select>
<option selected="selected" disabled="disabled">Choose best player...</option>
<option>Walter Payton</option>
<option>Jim McMahon</option>
<option>Mike Singletary</option>
<option>Richard Dent</option>
<option>Steve McMichael</option>
<option>Wilber Marshall</option>
</select>
I'd like the page to show the dropdown with "Choose best player..." in the color gray and then change the color if a non-disabled option is chosen.
I'd prefer a css solution if it exists, but after googling for quite some time I'm beginning to be convinced that some JavaScript will be required. Any simple solutions out there?
Here's a codepen with this preloaded.
I think you need a little javascript:
HTML
<select onchange="highlight(this)">
<option class="invalid" selected="selected" disabled="disabled">Choose best player...</option>
<option>Walter Payton</option>
<option>Jim McMahon</option>
<option>Mike Singletary</option>
<option>Richard Dent</option>
<option>Steve McMichael</option>
<option>Wilber Marshall</option>
</select>
CSS
option.invalid {
background: #eee;
}
option.valid {
background: #ff8;
}
JavaScript
function highlight(field){
field.options[0].className = 'valid';
}
jsFiddle Demo.
I think your difficulty (with a pure css solution) will be targeting your select element based on the attributes of a child element.
I would use some javascript to check that selected item isn't disabled and then apply your css.
Pure css you want:
select option[disabled="disabled"][selected="selected"]
{text-decoration:underline;}
This will style an option with both disabled and selected set. However, beware of browser compatability issues.
Demo
It won't however remove the style when another option is selected. According to MDN option:checked should be able to be used, but I have not been able to get it to work reliably (http://jsfiddle.net/gb35e6yj/).
I am not a programmer by any means and no very little about scripting. I could really use some help from someone who knows the ins and outs...
I am trying to recreate the actions on the following page: http://www.redkensalon.com/distributor-locator/
What I would like to happen is for the visitor to see the drop-down menu of states, when they select their state, it brings up the distributors coded for their state (region)
I am using wordpress and can easily add custom CSS and Java but I don't know what I need to do to make this work.
I am currently stuck at this point: http://norvellpro.com/?page_id=2947
The drop down action is just not functioning so I know it is a scripting issue.
Any help is GREATLY APPRECIATED!
Kristi Stewart
krististewart # att dot net
Try this
http://jsfiddle.net/cEb9y/1/
HTML
<select name="state_list" id="state_list">
<option value="">Select State</option>
<option value="distributor_alaska">AK – Alaska</option>
<option value="distributor_alabama">AL – Alabama</option>
</select>
<div id="distributor_alaska" class="statediv" >
alaska
</div>
<div id="distributor_alabama" class="statediv" >
alabama
</div>
JS
$(document).ready(function(){
$('.statediv').hide();
$('#state_list').change(function(){
var state = $(this).val();
if(!state) $('statediv').hide();
var div= $('#' + state );
div.removeClass('statediv');
$('.statediv').hide();
div.addClass('statediv');
if ( !div.is(':visible') ) div.fadeIn(500);
});
});
The select box that you want to trigger a change on has the id "state_list". You'll want to add some Javascript to the page that looks like this:
document.getElementById('state_list') = function() {
... change the HTML of the distributors div here ...
}
If possible, you should include this Javascript after the state_list element. That will cause it to be run after that element is created, which is necessary for it to work. If that's not possible, you can make this code a function that is run on document.onload, which is executed after all elements are loaded.
Is it possible to disable an option after creating a msDropdown plugin?
I explain my problem better.
I want to put html into each option with icons, text and some other stuff, so first i create an empty select then I add each option with the add function:
dropdown.add({text:$price.html(), value:'normal', className:'normal'});
The problem is that if a certain condition happen I have to disable one option, but there are no way to set an option disabled by using plugin settings.
There is the possibility to make an option disabled only by setting the related parameter disabled=disabled into the select before to call the msDropdown function, but I can't use this solution since I have to put dinamically html into option text.
Is there another way to do it?
Thank you for your help.
I found a solution.
I create my select empty and I fill each option with add function as before, but when that condition happen just do this:
var dropdown = $('select[name="priceType"]').msDropdown().data("dd");
if(credits_error) { // option must be disabled
dropdown.destroy(); // Make it a simple select
$('select[name="priceType"] option').attr('disabled', 'disabled');
dropdown = $('select[name="priceType"]').msDropdown().data("dd");
}
This way first I make it a simple select by calling destroy function, then I set properly the disabled attribute and I create a new msDropdown select.
It works for me, I tested it on IE, FF and Chrome
Yes, it is possibile. It can be done by using the disabled property of the option tag:
<select id="payments" name="payments" style="width:250px;">
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
<option value="amex" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
<option value="Visa" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>
The option 'cash' will be disabled.
Here is a working fiddle: http://jsfiddle.net/NKQRj/1/
EDIT
In this second example data are loaded from JSON data using:
$("#payments").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
to fill the elements.
You can define your options as disabled in your JSON data using disabled: true property:
{image:'http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
here is a working fiddle: http://jsfiddle.net/NKQRj/3/
I have some jQuery Mobile flip toggle switches on my Android/iPad application, and I need to
change their states (on/off) dynamically, using JavaScript.
I was looking for a solution here, (Change value of flip toggle dynamically with jQuery Mobile) and I tried several ways (.val('on'), .slider('enable')...) but it seems the control is not working at all.
Is there a solution for this issue? How can I do to change the flip switch state from code?
I've examined the page you posted and I confirmed that the solution:
$('selector').val('value').slider('refresh');
does indeed work. Make sure that 'selector' is referencing your select element, and that 'value' is a value you defined on the option element you wish to enable.
I confirmed this by visiting http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html, then with firebug's console entering the line:
$("#flip-b").val('no').slider('refresh');
It switched the second slider displayed on the page from yes to no.
There are two types of flipswitch, select based and checkbox based.
To set a select based widget, use the .val() construct
$("#myFlip").val("on").flipswitch( "refresh" ) ;
where "on" is one of the option values in the select element.
To set a checkbox based widget, use the .prop() construct:
$("#myFlip").prop( "checked", true ).flipswitch( "refresh" ) ;
where true is either true or false. (Thanks to Jeremy Hill for the hint).
BTW I tried the .flipswitch( "option", "checked", true ) construct with no luck.
Note there is also a slider switch similar to the select based flipswitch.
For JQuery 1.4 or later, if you want to toggle a flip switch dynamically
$("#flip").val('on').flipswitch('refresh');
Make sure that your data-role is flip-switch to make this work.
Good Luck !
Does this work:
http://jsfiddle.net/AYLpe/
JS
var fts = $('#flipMe');
fts.val('on');
fts.slider('refresh');
HTML
<label for="flip-a">Select slider:</label>
<select name="slider" id="flipMe" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
#Pizano's answer above worked for me.
I, too, was having this problem. In my case, I was missing the all-important ".slider('refresh')"
Cheers,
Steve
I couldn't get the 'flipswitch' part to work, so treating it like a normal checkbox might work for you (this is for jQuery Mobile 1.4.3):
$('input[name="my-flipswitch-name"]').prop('checked', true).trigger('click').trigger('change');
There are two ways to make flipswitches (checkbox-based and select-based), but you can can only dynamically change the state with the select-based method.
Jquery to change state:
$("#mySwitch").val('no').flipswitch('refresh');
Select-based method:
<select name="mySwitch" id="mySwitch" data-role="flipswitch" >
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
Checkbox-based: (can't change state dynamically)
<input type="checkbox" id="mySwitch" data-role="flipswitch">
$("#mySwitch").val('no').flipswitch().flipswitch('refresh');
seems to work, too.