0

有人能告诉我如何有多个下拉菜单，包括大小、重量、字体颜色和字体系列。一旦用户从每个下拉列表中选择一个，点击提交和 p 或 div 元素会改变吗？我有一个代码，但不确定如何更改多个？我还需要更改为单击按钮，并且显示出现在 ap 标签中，而不是实际按钮中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS Change Class</title>
<style type="text/css" media="screen">
.red { border: 1px solid red; }
.blue { border: 1px solid blue; }
.green { border: 1px solid green; }
</style>
</head>

<body>

<select id="colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

<input type="button" class="red" value="This is a button" id="button" />


<script type="text/javascript" charset="utf-8">

var colors = document.getElementById('colors');
var button = document.getElementById('button');

addEvent(colors, 'change', function() {
    button.className = colors.value;
});

// Based on the lessons from Nettuts
function addEvent(obj, evt, fn) {
    evt = evt.replace('on', '');
    if( obj.attachEvent )
        obj.attachEvent('on' + evt, fn);
    else
        obj.addEventListener(evt, fn, false);
}

</script>   

</body>
</html>

**更新：我想添加三个下拉菜单，大小 x3 选项，字体系列 x3 选项和字体粗细 x3 选项。用户应该能够从每个中选择，然后单击提交按钮，它将显示在 ap 标签中。

4

1 回答 1

0

使用 jQuery，更改此行：

button.className = colors.value;

对此：

$(":button").each(function(){
   this.className = colors.value;
})
于 2012-11-28T15:53:52.710 回答