[英]Change value of another SELECT tag, when selecting different select options
I have a select tag, where users can select what TYPE of exposure they want for their clicks:我有一个 select 标签,用户可以在其中 select 他们希望点击的曝光类型:
<select name="exposure">
<?php while($a = mysql_fetch_assoc($r)): ?>
<option value=""><?php echo $a['exposure']; ?></value>
<?php endwhile; ?>
</select>
Below that, I have another select tag, that will show the clicks with value taken from whatever exposure type they chose:在此之下,我有另一个 select 标记,它将显示从他们选择的任何曝光类型中获取值的点击:
<select name="clicks">
<?php while($a = mysql_fetch_assoc($r)): ?>
<option value=""><?php echo $a['amount']; ?></value>
<?php endwhile; ?>
</select>
My question is: How can I change the value in the second select tag, according to whatever the user has chosen in the first?我的问题是:如何根据用户在第一个标签中选择的内容更改第二个 select 标签中的值?
This shouldn't be too difficult.这应该不会太难。 All you really need is a mapping between 'exposure' values and 'clicks' values, and some way to turn the 'clicks' values into valid markup.
您真正需要的只是“曝光”值和“点击”值之间的映射,以及将“点击”值转换为有效标记的某种方式。 You can play around with the example below on jsFiddle: http://jsfiddle.net/ninjascript/5QPq5/
您可以在 jsFiddle 上使用以下示例: http://jsfiddle.net/ninjascript/5QPq5/
/**
* Here's a map of possible values from 'exposure' and
* related values for 'clicks'.
*/
var map = {
"OptionA": ['A001','A002','A003'],
"OptionB": ['B001','B002','B003']
};
/**
* A quick and dirty method to turn some values in the map
* into a set of <option> tags.
*/
function create(key)
{
var result = [];
if (map.hasOwnProperty(key)) {
for (var i = 0; i < map[key].length; i++) {
result.push('<option value="'+map[key][i]+'">');
result.push(map[key][i]);
result.push('</option>');
}
}
return result.join('');
}
/**
* Use jQuery to handle every 'change' event and add a new
* set of <option> elements to the 'clicks' element.
*/
$('select[name="exposure"]').live('change', function()
{
var options = create(this.value);
$('select[name="clicks"]').html(options);
$('div').html('<span>foo</span>'); // <-- Update some other element too
});
Edit: jQuery.live() will execute a function whenever an event occurs.编辑: jQuery.live() 将在事件发生时执行 function 。 You can do whatever you want within that function, including change the contents of multiple DOM elements.
您可以在 function 中做任何您想做的事情,包括更改多个 DOM 元素的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.