I use easydropdown.js to style the HTML select.
The problem is that populating dynamically select via $.post jquery, the script does not work.
You know how to help me? Thanks.
We can get select object, modify its value, and then destroy and re-init as code below:
<select id="select-to-easydropdown" class="dropdown">
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
/* in js code with jquery */
var select = $("#select-to-easydropdown");
// process with select object (add/remove option)
select.append('<option value="option3">option 3</option>');
// destroy if existing easydropdown object
select.easyDropDown('destroy');
// init or re-init easydropdown
select.easyDropDown({
onChange: function(selected){
// add change event listener
...
}
});
Hope it helps!
var choose = '<option value="0">choose...</option>';
var wait = '<option value="0">wait...</option>';
$("#select_2").html(choose);
$("#select_3").html(choose);
$("#select_1").change(function(){
var val_select_1 = $("#select_1 option:selected").attr('value');
$("#select_2").html(wait);
$("#select_2").attr("disabled", "disabled");
$("#select_3").html(choose);
$("#select_3").attr("disabled", "disabled");
$.post("select.php", {id_select_1:value_select_1}, function(data){
$("select#select_2").removeAttr("disabled");
$("select#select_2").html(data);
});
});
$("#select_2").change(function(){
$("#select_3").attr("disabled", "disabled");
$("#select_3").html(wait);
var val_select_2 = $("#select_2 option:selected").attr('value');
$.post("select.php", {id_select_2:value_select_2}, function(data){
$("#select_3").removeAttr("disabled");
$("#select_3").html(data);
});
});
and select style this https://github.com/patrickkunka/easydropdown
Related
I want to create setting page in my ionic app
HTML :
<select class="selectCountry">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
Controler.js
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
});
you can put ng-model on the select and trigger onchange function
<select class="selectCountry" ng-model="selectCountry" ng-change="save()">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
and in the controller
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
$scope.save = function(){
$localStorage.selectCountry= $scope.selectCountry; // set
alert($localStorage.selectCountry); // get
}
$localStorage.selectCountry = $localStorage.selectCountry; // get
});
Check the docs for it NgStorage
i created this pen Here
.service('storage', function() {
var myjsonObj = "nothing";//the object to hold our data
return {
setJson:function(name, item){
window.localStorage.setItem( name, item );
},
getJson:function(name){
return window.localStorage.getItem( name );
}
}
})
if you wanna store and retrieve the variable.
storage.setJson("nameOfSetting", "theVariableYouWannaStore");
var theVariableYouStored = storage.getJson("nameOfSetting");
I have a select box
<select>
<option value="0">0 mins</option>
<option value="1">1 mins</option>
<option value="2">2 mins</option>
</select>
and I want to fire an event when the visitor either clicks on a value or clicks anywhere else on the page -i.e loss of focus on the select box
I've fiddled about for four hours now with no joy. I'm now down to this:
var c = 0;
$("selectTime").addEvent('click', function() {
if (c++ % 2 == 1) {
console.log(c);
//$(this).blur();
}
});
$('selectTime').click(function() {
if ($('select').is(':blur')) {
c = 1;
} else {
c = 0;
}
});
any ideas?
thanks
The mootools syntax for adding multiple events to same element is:
$('myElementID').addEvents({
blur: function(){
alert('blur');
},
click: function(){
alert('click');
}
});
Example with you code
You could though use just the change event, which fires when the element is changed. Like:
$('myElement').addEvent('change', function(){
alert('Select changed');
});
Example
Note that part of your code is using jQuery syntax, part is using MooTools syntax.
I want to bind boolean value to select element using KO v2.1.0, but obviously it doesn't work as expected.
HTML code:
<select data-bind="value: state">
<option value="true">On</option>
<option value="false">Off</option>
</select>
JavaScript code:
var model = {
state: ko.observable(false)
};
ko.applyBindings(model)
So I expect the select box goes to "Off" position with the initial value false but it was at "On". If I put state: ko.observable("false") it will be correct but that's not I wanted. Anyone know how to bind the boolean value to select box with KO?
Jsfiddle: https://jsfiddle.net/greenlaw110/Ajm58/
Here is an option that we explored for this one from this forum post:
ko.bindingHandlers.booleanValue = {
init: function(element, valueAccessor, allBindingsAccessor) {
var observable = valueAccessor(),
interceptor = ko.computed({
read: function() {
return observable().toString();
},
write: function(newValue) {
observable(newValue === "true");
}
});
ko.applyBindingsToNode(element, { value: interceptor });
}
};
So, we use a custom binding to inject a writeable computed observable between the UI and our view model. This is just an alternative to doing it directly in your view model.
Sample here: https://jsfiddle.net/rniemeyer/H4gpe/
This happens because the select is working with strings, and not booleans at any stage.
You should try a ko.computed( ... ) value instead.
Check here for details: https://jsfiddle.net/Ajm58/3/
<select id="testSelect" data-bind="value: stateString">
<option value="true">true</option>
<option value="false">false</option>
</select>
var model = {
state: ko.observable(false)
};
model.stateString = ko.computed({
read: function() { return (this.state() ? "true" : "false"); },
write: function(value) { this.state(value == "true"); }
}, model);
ko.applyBindings(model);
setTimeout(function() {
model.state(true);
}, 1500);
setTimeout(function() {
$("#testSelect").val("false");
}, 3000);
Much easier than the other answers: use the options-Binding.
The answer is in the kind of lengthy expression below:
<select data-bind="options: [{text: 'On', value: true}, {text: 'Off', value: false}], value: lala1, optionsValue: 'value', optionsText: 'text'">
By using the options binding, you're able to assign virtually everything to the value of an option. It's rather uncommon, I guess, to bind an explicit value to the options binding, but in this 2-way case, it is reasonable.
I think I got the answer, put the number "1" and "0" to the option value respectively:
<select data-bind="value: state">
<option value="1">On</option>
<option value="0">Off</option>
</select>
See https://jsfiddle.net/greenlaw110/Ajm58/2/
I need to create a reset button which on click will set all select lists in a form to index 0. I have tried this code for function, but it gives a syntax error on myForm.length;
<script type="text/javascript">function ResetForm(form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ){
myForm.select[i].selectedIndex =0; } }
</script>
There is no such property as someForm.select, try this instead:
selectTags = myForm.getElementsByTagName("select");
for(var i = 0; i < selectTags.length; i++) {
selectTags[i].selectedIndex =0;
}
A quick note to answer from Ron Royston
(I've only tried this on Chrome 74.0)
Setting mySelect.selectedIndex = 0; or $('#mySelect').prop("selectedIndex", 0); won't work if the option if it's disabled.
Hope this saves someone some time and frustration!
You simply need to set the .selectedIndex property, as in mySelect.selectedIndex = 0;. Try out the example below.
var doc = document;
var myCheckbox = doc.getElementById('my-checkbox');
var mySelect = doc.getElementById('my-select');
myCheckbox.addEventListener("click", function(e){
if (this.checked){
mySelect.disabled = false;
} else {
mySelect.selectedIndex = 0;
mySelect.disabled = true;
}
});
<label><input type="checkbox" id="my-checkbox" value=""> Enable Dropdown</label><br>
<select id="my-select" disabled>
<option class="placeholder" selected disabled value="">Select credential</option>
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
This will set every selection directly after changing to the first option:
<select onchange="your_selection_func(); this.selectedIndex=0;">
You may find jquery useful here. This SHOULD do the trick...
$(function()
{
$('.resetButton').click(function()
{
$(this).closest('form').find('select').each(function()
{
$(this)[0].selectedIndex=0;
});
});
});
<input type="reset" class="resetButton" />
I found some hack:
<select onchange="doSomething()">
<option value="a" selected disabled hidden>a</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="…">…</option>
</select>
combination of selected disabled hidden causes that (visualy) first option responds with change event (even with same value!).
Working with IE, Edge, Opera, Chrome, but not working in FF :(
I realize this is kinda old, but wanted to improve on teh1's answer. There's no reason to create a jQuery object from 'this' when you're just going to grab the DOM element back from it:
$(this).closest('form').find('select').each(function() {
this.selectedIndex = 0;
});
I m using jQuery 1.7+ latest .on method, but failed to implements, please help me.
working Fiddle.
basically here is my
HTML
<ul id="sortByRight" >
<li id="1">List</li>
<li id="2">Photo</li>
<li id="3">Map</li>
</ul>
<select name="sort" id="sort" >
<option value="1">Recommended</option>
<option value="2">Price: low to high</option>
<option value="3">Price: high to low </option>
<option value="4">Newest</option>
</select>
jQuery code
$(document).on('change click', 'ul#sortByRight,select#sort', function() {
selectedOption = $('select#sort').val();
whatToShow = $(this).attr('id');
alert('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);
}
);
now I havebelow problems/queries.
can we bind one event with one selector i.e. above function should be called
EITHER on change of selectbox OR on click of ul.
how to set data argument in .on method. I have tried like below
$(document).on('change click', 'ul#sortByRight,select#sort',
{ selectedOption : $('select#sort').val(), whatToShow : $(this).attr('id') } ,
function(){console.log('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);}
);
but get an error that selectedOption is not defined.
can we write something like this $(this, li); because I need the id of li not the id of selectbox.
if there is any other optimized solution ( using function like live or bind ), then please tell me.
Thanks A Lot.
I'm not 100% clear on what you actually want to do, but one thing doesn't make much sense. You want to send the ID of the LI when the select box is changed. Which LI? The last LI clicked? You need to store the state of the active LI so that you can send it in the ajax request if the select box is changed.
Perhaps something like this:
$('select#sort').change(function() {
processAjax();
});
$('ul#sortByRight > li > a').click(function() {
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
processAjax();
});
function processAjax() {
selectedOption = $('select#sort').val();
whatToShow = $('ul#sortByRight').find('.active').attr('id');
alert('selectedOption:' + selectedOption + 'whatToShow:' + whatToShow);
}
or check out the jsFiddle