I programmed a select box for a client which e 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>

I programmed a select box for a client which e 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>

• javascript
• html
• jquery
• jquery-events

2 Answers 2

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.