ok I've got a dropdown menu, and I use
$('select.small').change ...
It has a couple of options, the problem though, when I select the first option - nothing happens - because it is already selected. Is there any way to make it happen?
So far I was using an additional empty option, which was selected by default and did nothing, but now I've got to use this first and empty option for cleanout, so I just can't add an additional default and empty option.
If you mean from when the page loads then try calling the change method right after you set-up the change callback; this effectively acts as if the user chose it right away:
$('select.small').change(function() {
//..
}).change();
I have made it. And I will proudly answer myself,
$('select.small').bind('focus click',function(){
$(this).children().removeAttr('selected');
});
Related
In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});
Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);
So, I'm trying to read a list of options from the server, and supply it to tag, with the first option as default - which is really important thing to do - but all I've got is the model is being set correctly, but in the select it shows blank!, and I have no idea why is that!
I've tried a lot of SO soulations, here, here, and here.
view:-
<select ng-options="option as option.Name for option in options track by option.ID" ng-model="selected">
controller:-
DataService.getOptionsFromServer().then(function (result) {
//console.log(result.data);
$scope.options = result.data;
$scope.selected = $scope.options[0];
console.log($scope.selected);
}, function (err) {
console.error(err);
});
the
console.log($scope.selected);
shows that the selected is being set correctly!
any help?
Update1: Seems the problems is compatibility between angular and jquery-mobile (not added by me :#), anybody knows something about that?
Update2: when removing jquery.mobile.min.js, it works fine. unfortunately, I need it throw out the project.
Update3: the problem is that JQM produce a span to display the value selected, and that's the problem!, I've binded the select, not the span.
the problem is that I can't bind the span till now, 'cuase JQM generate the span in the runtime :( , that's why when commenting out the JQM js it works fine.
Updated4: solved :D, solution given below for future reference.
the problem is that JQM doesn't display the selected value itself, instead it gets the selected value, and put into a span in run time, and then hides the select completely, trust me, it took me > 12 hours to learn it the hard way!
so in order for JQM to re-get the selected value from the select and send it to displaying span, you have to call:
jQuery("#SelectId").selectmenu("refresh", true);
notice that in case you're using angular like me, it's better to use "jQuery" not "$" to avoid conflict between angular and jQuery.
don't take that one line solation lightly :D, it cost more than a working day to get it :D, hope it would be helpful :D .
importent ref: here.
also note: you can make an angular directive if you intend to use the select more than once :D .
Maybe you are not getting any data from the server ,can you check that?
I'm using the Chosen plugin on my site, and so far it has been working perfectly. However, I'm in a situation where I added a select dynamically and activated the Chosen plugin on those selects. These Chosen selects are being produced fine, but I cannot figure out how to bind a click event to the element. Chosen offers this( $("#form_field").chosen().change( … );) as a way to do something on the change event, however, this does not work since my select was added dynamically.
I have tried $('#el').change and $(document).on("change", "#el", function()) as well without any success.
Original Answer:
From http://harvesthq.github.io/chosen/#change-update-events
"If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content."
$("#form_field").trigger("chosen:updated");
...so just call that after you add the new element.
Edit:
After reviewing this http://jsfiddle.net/amindunited/reh5p0tg/3/
I can see that the issue was that the change() listener for the second select was being attached before that select was added to the page.
I have updated the fiddle code to work:
http://jsfiddle.net/amindunited/reh5p0tg/4/
EDIT
Another way to make it work is to stuff everything inside an init function:
function init_new_content(){
$("#form_field").chosen();
}
init_new_content();
And then call it whenever you know you made a change (for example on ajax)
$.ajax({...},
success: function( data){
init_new_content();
},
...
When trying to deselect the currently selected item in chosen through a knockout binding it seems to get reset back to what it was before the reset:
Here's the example:
http://jsfiddle.net/WPpH2/7
Select jQuery from the drop down and click "clear" to see this behavior.
Here's how the data bind is being done:
data-bind="value: selected, chosen: {}">
Any thoughts on how I can make this actually reset?
The reason you're seeing this is because of how the control works. When you click clear, you set the observable to null. The plugin then tries to find an option that has the value null. Because it doesn't find it, it resets your selection to what was last selected.
In your jsfiddle, if you change this line:
myViewModel.selected(null);
to this line:
myViewModel.selected("");
then your example will work. The reason is that you have an option where the value is an empty string.
Also, if you want your plugin to update on the UI, you will need to use this as well:
$(".chosen").trigger("chosen:updated");
I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called