I'm having a hella time setting the value of a hidden input.
I want to pass the HTML from between the option tags to the hidden field- end run it will the page title from wordpress' wp_list_dropdowns(). I've got it returning the text just fine, and on my change event it correctly adds some css (obviously unneeded on a hidden field, but I was trying to determine where things are breaking down). Works if I change the hidden input to a text input. I've seen in several places on SO that this is possible, (changing the value of a hidden input that is), but something is holding me up now and I can't see the answer.
Here's the JSFiddle:
JavaScript:
$(".selector").change(function() {
var $value = $(this).val();
var $title = $(this).children('option[value='+$value+']').html();
alert($title);
$('input#bacon').val($title).css('border','3px solid blue');
});
HTML:
<select class="selector" name="testselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</h3>
<input id="bacon" type="hidden" class="bacon" value="" name="testinput">
It's simple as:
$('#action').val("1");
#action is hidden input field id.
Your jQuery code works perfectly. The hidden field is being updated.
Seems to work
$(".selector").change(function() {
var $value = $(this).val();
var $title = $(this).children('option[value='+$value+']').html();
$('#bacon').val($title);
});
Just check with your firebug. And don't put css on hidden input.