Javascript 使用多个下拉菜单更改p标记类_Javascript_Jquery_Css_Arrays_Class

Javascript 使用多个下拉菜单更改p标记类

javascript jquery css arrays class

Javascript 使用多个下拉菜单更改p标记类,javascript,jquery,css,arrays,class,Javascript,Jquery,Css,Arrays,Class,有人能告诉我如何有多个下拉列表，包括大小、重量、字体颜色和字体系列。一旦用户从每个下拉列表中选择一个，单击submit并更改p或div元素？我有一个代码，但不知道如何更改多个？我还需要更改为点击按钮，显示在一个p标签，而不是实际的按钮出现 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

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

<!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>


JS变更类
.red{边框：1px实心红色；}
.blue{边框：1px纯蓝色；}
.green{边框：1px纯绿色；}
红色
蓝色
绿色
var colors=document.getElementById（'colors'）；
var button=document.getElementById（'button'）；
addEvent（颜色，“更改”，函数（）{
button.className=colors.value；
});
//基于Nettuts的经验教训
功能加法器（obj、evt、fn）{
evt=evt.replace（'on'，''）；
如果（对象附件）
对象附件（“on”+evt，fn）；
其他的
对象添加列表器（evt、fn、false）；
}

**更新：

我想再添加三个下拉列表，大小x3选项、字体系列x3选项和字体重量x3选项。

用户应该能够从每个选项中进行选择，然后单击submit按钮，它将显示在p标记中。

使用jQuery，更改此行：

button.className = colors.value;

为此：

$(":button").each(function(){
   this.className = colors.value;
})

为了澄清，当用户从“选择”标签中选择一个项目时，您想更改按钮上的文本吗？我想再添加三个下拉列表，即“大小”、“字体系列”和“字体重量”。用户应该能够从每个选项中进行选择，然后单击submit按钮，它将显示在p标记中。但我需要具有不同选项的乘法下拉列表，并且我需要它显示在div或p标记中。