I programmed a select box for a client which come to find out gets re-scripted by a third-party JavaScript function into a bunch of divs and spans, then finally a hidden element which contains the selected value from choosing the div/span element. There is another select box which I programmed just underneath this select box which is dependent on the value of the first select box (i.e. the user chooses a country, then if the country contains regions such as USA and Canada, a state select box appears). In any case, I thought it would be best to just add an onChange event to the newly created hidden element from the first select box and then write my own JavaScript function which would show/hide the second select box based on the hidden elements value when it changed as a result of selecting the country (the third party JavaScript already updates the hidden element value with the newly selected country value). I've tried doing this in jQuery and just straight JavaScript API, however nothing seems to work. Just FYI, when the third party javascript rescripts my select box into div/span's and a hidden input field, the hidden input field does not have an id attribute, so I reference the element through its name (collected_data[7][0]). Here's the code I tried thus far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input-country").change(function(e){
console.log("testA");
});
})
jQuery("input-country").change(function(e){
console.log("testB");
});
jQuery(document).ready(function(){
jQuery(document.forms['myForm']['collected_data[7][0]']).change(function(e){
console.log("testC");
});
})
jQuery(document.forms['myForm']['collected_data[7][0]']).change(function(e){
console.log("testD");
});
document.forms['myForm']['collected_data[7][0]'].onchange = function(){
console.log("testE");
};
document.getElementById('input-country').onchange = function(){
console.log("testF");
}
jQuery(document.forms['myForm']['collected_data[7][0]']).live('change',function(){
console.log("testG " + jQuery(this).val())
});
jQuery('input-country').live('change',function(){
console.log("testH " + jQuery(this).val())
});
jQuery(document).ready(function(){
jQuery(document.forms['myForm']['collected_data[7][0]']).live('change',function(){
console.log("testI " + jQuery(this).val())
});
})
jQuery(document).ready(function(){
jQuery('input-country').live('change',function(){
console.log("testJ " + jQuery(this).val())
});
})
</script>
You won't get "change" events when the hidden element is changed programatically by somebody's JavaScript code. Those are only generated by the browser when there's actually user action. What would be better would be for the 3rd-party JavaScript to explicitly call ".change()" (the jQuery method) on the hidden select.
A hidden element is clearly never going to be a target for user interaction.
'input-country' is not a valid selector. Further, the change event requires focus gain, value change, focus loss (blur)--hidden inputs will not have such a sequence of events, so you must manually trigger change on them when you change their values.
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 have multiple select boxes in the pages. I want to set focus on first element of specific select box. Here it shows how to set focus on select box. I need to say which one too. I tried below code but it didn't set the focus.
$('#thirdDropBox select:first').focus();
If you want the user to have focus on the first of multiple select's, you can use the following jQuery code:
If you have an id for the first select, you can directly access that element with the following:
$(document).ready(function () {
$('#idOfFirstSelect').focus();
});
However, if you don't have the id, the following code should work.
Demo: http://jsfiddle.net/biz79/1qo6mxnf/
$(document).ready(function () {
$('select').first().focus();
});
On a separate note, if you also want to have a default option selected, you can set that option to "selected" in the HTML:
<option value="saab" selected="selected">Saab</option>
The JQuery selector:
$('#thirdDropBox select:first')
will select the first "select" html element that is a descendant of an html-element that has an ID-attribute with the value "thirdDropBox".
For more information see: http://api.jquery.com/descendant-selector/
You probably need to remove the '#thirdDropBox"-part from your selector:
$('select:first')
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 script that looks at a popup modal with a form and should get the first input and focus to that. The forms can change and the input id will always be different.
I am catching the id with var item_id = $('.otf_itm [id]').first().prop('id'); This returns the first. In on case the input has an id of town_name. The problem is that the item does not focus when I use the $('#' + item_id).focus(); How can I get the form item to focus? I have used this method successfully before to get data using .val() and other manipulate parts of the page
// works
$('#town_name').focus();
// doesnt work
$('#' + item_id).focus();
$("#myForm input:first").focus();
Will focus the first input element. Whatever the first input element is.
Remark <select> elements do not fall under this category.
for this custom select box, what needs to be done to display an image which is associated to an option value in the select box placeholder.
http://jsfiddle.net/6eCFz/
in this code, how to use the data-attribute, first, to show an image associated with an option value as the selected value and second, to display tick marks when dropdown is opened to indicate the selected value.
Additionally, there are minor bugs:
a code for unique selection, for two select box filled with same options, does not seem to work.
$("#c_id1").change(function(){
$("#c_id2 option:hidden").show();
if($(this).val().length ){
$("#c_id2 option[value=" + $(this).val() + "]").hide();
}
});
$("#c_id2").change(function(){
$("#c_id1 option:hidden").show();
if($(this).val().length ){
$("#c_id1 option[value=" + $(this).val() + "]").hide();
}
});
http://jsfiddle.net/73epV/ - (vanilla script as proof-of-concept)
also, it does not ensures uniqueness onLoad
after triggering the dropdown, if mouse is moved away without first hovering over the option list, the dropdown does not close.
lots of love for any help :)
thanks