Javascript 更改更改元素上的人力资源属性

我想这一定很简单，但我没有javascript的经验，这对我来说越来越困难。 我的页面上有一个hr元素，还有一个颜色选择器和一个dropdownlist，它们的值从1到10不等。 我需要做的是在颜色选择器或下拉列表更改其值时更改hr高度和颜色

以下是我的html代码：

<div id="colourSelector" class="row">
<input id="backgroundcolor" name="backgroundcolor" size="6" maxlength="6" type="text" style="display: none;"><div class="colorPicker-picker" style="background-color: rgb(204, 204, 204);">&nbsp;</div></div>

<div id="lineHeight" class="row">
<select name="lineHeight" id="lineHeight">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></div>

<div id="divlineDemo" class="section row">
<hr id="lineDemo" style="height: 2px; background-color: red; border: 0;"> </div>

JS代码：

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
        var val= $("select#lineHeight").val();
        $("select#lineDemo").height().value; 
    }); 
</script>

---

我使用了所选选项的值作为hr的高度

这里是一个工作示例，说明您正在努力实现的目标

您设置了2次不同的线宽id，这让我很头疼。我将select的ID重命名为lineHeightSelect，并将colorpocker更改为type=color

$function{ var colorPicker=$'backgroundcolor'； var headline=$'lineDemo'； var lineHeight=$'lineHeightSelect'； lineHeight.onchange，函数{ headline.csheight，$this.val+px； }; colorPicker.onchange，函数{ headline.css'backgroundColor'，$this.val； }; }; 1. 2. 3. 4. 5. 6. 7. 8. 9 10

---

你能展示你的Javascript代码吗？@JavierEslava：使用编辑链接，而不是注释，来改进这个问题。那么颜色选择器呢？他不需要jQuerythis@Saar：提供jQuery解决方案是一个有效的答案，因为OP用jQuery标记了问题。我理解，但你可以看到：但我没有使用javascript的经验。n/mThanks praszyk！！！它工作！！！现在还有一个问题。我必须将lineDemo中选定的值保存到数据库字段中。如何做到这一点？在一个更改事件中使用$.ajax将值提交到服务器端脚本，在该脚本中将新更改的变量保存到数据库中没有问题。如果您还有其他问题，您应该打开一个关于堆栈溢出的新问题。在你提出新问题之前，别忘了搜索。还要考虑接受这个线程中列出的解决方案。

jQuery('#lineHeight').on('change',function(){ jQuery('#lineDemo').css('color','red').css('height','4px')

$('#lineHeight').change(function () {
    var val = $('option:selected', this).val();
    $('#lineDemo').css('height', val+'px')
})
$('#backgroundcolor').change(function () {
    var val = $(this).val();
    $('#lineDemo').css('background-color', val)
})