How to change value in input (textbox) by changing select

I'm trying to change the value in an input when a different option gets selected from a select:

View image here.

The idea is that for each ad package you can have a different number of images (free gets 0 images, $20 for 4 images etc.). With this number I then want to display the correct amount of upload fields for images.

I'm already retrieving the values from the database for the number of images for each package as you can see in the code below:

<select name="ad_pack_id" class="dropdownlist required">

<?php foreach ( $results as $result ) { ?>

<option value="<?php esc_attr_e($result->pack_id); 开发者_如何学编程?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>

<?php } ?>

</select>

<input type="hidden" value="" name="packimages" id="packimages" />

I've tried getting the value from the select directly by doing:

mainform.ad_pack_id.options[selectedIndex].class.innerHTML

but this isn't getting the number of images.

How can I get the number of images for the selected ad package without submitting the form first?

you could also try jquery:

$("#ad_pack_id option:selected").val()

this should get you the value. to show/hide upload fields you can use for example the CSS display attribute:

$("#uploadfield_1").css("display", "none")
$("#uploadfield_1").css("display", "block")

try this:

document.mainform.ad_pack_id.options[Selected].className;

This code will set the input's value to the selected option's value.

I just added "id" attribute to select menu

<select id="ad_pack_id" name="ad_pack_id" class="dropdownlist required">

<?php foreach ( $results as $result ) { ?>

<option value="<?php esc_attr_e($result->pack_id); ?>" class="<?php esc_attr_e($result->pack_images); ?>"><?php esc_attr_e($result->pack_name); ?></option>
<?php } ?>

</select>

<input type="hidden" value="" name="packimages" id="packimages" />


<script type="text/javascript">
var selectmenu = document.getElementById("ad_pack_id");
selectmenu.onchange = function()
{ //run some code when "onchange" event fires
var chosenoption = this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing")
    {
    document.getElementById("packimages").value = chosenoption.value ;
    }
}
</script>