I have a select option box that is dynamically populated, so if I change the select some other boxes are filled, and I can delete them too.
Which also deletes the option from the select box, this works fine, but when I delete the options and I have just one left in the box, there seem to be no way to fire the option.
$("#email_name").on("change", function(){
var componentkeys = myDailyemail.getKeys($("#Component").val());
$.each(componentkeys, function(kIndex, kItem) {
$("#key").append($("<option/>").val(kItem).text(kItem.toUpperCase()));
});
});
You can automatically trigger a change event after you populated the select element, making it as if the user already selected the first option.
$("#email_name").on("change", function(){
var componentkeys = myDailyemail.getKeys($("#Component").val());
$.each(componentkeys, function(kIndex, kItem) {
$("#key").append($("<option/>").val(kItem).text(kItem.toUpperCase()));
});
$("#key").trigger("change"); // trigger key
}).trigger("change"); // trigger email_name
I wasn't sure what you wanted to trigger so I entered both possibilities.
You can use .trigger() to fire events manually.
Insert following, where needed.
$("#email_name").trigger('change');
Related
so I have a select box like this with more elements being loaded in of course.
<select class="cherry-dropdown">
<option class="cherryOption" value="#cherry_'.$rownum.'">'.$name.'</option>
</select>
And. I'm trying to use javascript to take me to the appropriate page location based off the value attribute in the option.
$('.cherry-dropdown').click(function(){
console.log("yes");
$('.cherryOption').click(function(){
console.log("maybe");
window.location=$(this).val();
});
});
I'm getting yes from the first console.log (opening the select box to reveal the options). But when I click an option I'm not getting the maybe console.log, and thus the window.location part isn't working as well.
What am I doing wrong here...
You only actually need one event listener here, if you target the select menu itself (.cherry-dropdown) and listen for a change event instead of click, and then by passing the event as a argument to access it's value.
$(".cherry-dropdown").change(function (e) {
console.log(e.target.value); //Returns the selected options value
window.location = $(this).val();
});
I am switching between different projects by on change event on select element. I am getting them from DB. But before loading different project i have to store name of previous one.For that i am using on focus event.
How can i then deselect my select element?
document.getElementById("selectProject").selected = false;
is not working.
var whichProjectToSave;
function onFocusSelectProject(){
//for saveJsonF();
whichProjectToSave=document.getElementById("selectProject").value;
}
function callSettingswindow(){
saveJsonF();
canvas.clear();
getJsonF();////////////////////////////////////
document.getElementById("selectProject").selected = false;
}
document.getElementById("selectProject").onchange= callSettingswindow;
To make it clear: How to deselect "select" element after change is performed?
I am not aware of any methods that will let you "de-focus" from an element. But you could focus on any other element - as a result the select element will lose focus.
You could make use of jQuery if you wanted to programmatically focus on the element with next tab index. See this answer for more details.
I've got three dropdown menu's which are dynamically filled from the database each time I select an option in the previous dropdown menu.
Now I want to access the values in these dropdown menu's, so that I can build a SQL-query somewhere later.
I've used the following code to access the HTML elements:
$( window ).load(function(){
var e = document.getElementById("slctTable");
var slctTableValue = e.value;
console.log(slctTableValue);
});
This code only works the first time the page loads, so when I mess around with the dropdown menu's, nothing changes.
What I want now, is that each time I select a value in the dropdown menu, it updates the slctTableValue variable.
Bind change event to the drop-down with jquery, then this event will fire whenever there is a change happened on the selected value.
$("#slctTable").change(function() {
var slctTableValue = $(this).val();
console.log(slctTableValue);
});
You can detect change event like this and update value:
document.getElementById('slctTable').addEventListener('change',function(){
var e = document.getElementById("slctTable");
var slctTableValue = e.value;
console.log(slctTableValue);
});
I have a top level select box that when a user makes a selection here, I want this value to be used for all the below select boxes relating to this top level box.
The problem I am having is that, if any one of the lower select boxes is disabled, I want the above process to ignore this select box as it has already been assigned a value.
Obviously, if the lower select box is enabled then I want to assign the top select value to it.
To disable the select list based on a particular value, I have used:
$("select[name=f03]").eq(index).attr('disabled', 'disabled');
Here is the jQuery that I have used but is not working:
var top_select = $("select[name=f07]").val();
$("select[name=f03]").each(function(index){
if $("select[name=f03]").eq(index).is(':enabled'){
$("select[name=f03]").eq(index).val(top_select);
}
});
From this code, it is the lower selects ([name=f03]) that I am trying to set only when it is enabled.
First I would disable select like this:
$("select[name=f03]").eq(index).prop('disabled', true);
Second, your function should be much simpler:
$("select[name=f03]").each(function(){
if ($(this).prop('disabled')) return;
$(this).val(top_select);
});
you should use jquery :enabled selector as follow
$("select[name=f03]:enabled").each(function(){
//execution
});
or
$("select[name=f03]:enabled").val("value");
here is jsfiddle example http://jsfiddle.net/kso2oqr5/1/
When you are disabling elements use .prop(property,value)
var top_select = $("select[name=f07]").val();
$('select[name="f03"]').val(function(){
if(!this.disabled){
return top_select;
}
});
DEMO
I have a dropdown select list on my page of class="TypeFilter".
I have a jQuery event that fires when a value in that list is selected.
$(".TypeFilter").change(function()
{
// Extract value from TypeFilter and update page accordingly
));
I now have to add another list to the page, and I want to implement functionality which will prevent the .change(function() from running unless both are selected.
In both lists the first option in the list is some text instructing the user to select one of the items, so I was thinking of just writing some logic to test that both lists have a selected index greater than 0.
I think this is a touch unclean though, especially considering that other pages that have a TypeFilter use the same logic.
Is there any nifty functionality in jQuery that can do this?
edit I should specify that the user needs to be able to update the page by selecting either dropdown, so I can't put the onchange on the second element and test that the first element has a selected value, as suggested in one of the answers
If you bind the same event to all dropdowns, you can get a collection of all the dropdowns and check that all of them are selected. Example:
$('.Dropdown').change(function(){
var elements = $('.Dropdown');
if (
elements.filter(function(){
return this.selectedIndex > 0;
}).length == elements.length
) {
// all dropdowns are selected
}
});
As you partly mention, put the onchange on the second element and test that the first element has a selected value before you fire off any logic.
Use bind instead, and as the eventdata, send a function that checks that either that both are selected or that the other is selected. Untested code:
function checker() {
// test your conditions
}
$(".TypeFilter").bind('change', {test: checker}, function(event)
{
if (event.data.test && event.data.test()) {
// Extract value from TypeFilter and update page accordingly
}
));
This way the other pages that use the same function will not notice any changes.