在jquery中迭代多个下拉列表
Iterating Through multiple dropdowns in jquery
嗨，我有for循环迭代和设置多个下拉列表。我想遍历每个下拉框并设置背景颜色为onload。由于某些原因，只有第一个列表填充颜色，这也只在Chrome中。下面是小提琴代码。我怎么拿到剩下的钱以及填充颜色的列表。thanks
http://jsfiddle.net/ritikia/ava2v8yw/1/HTML代码
<div class="s_exch_status_outer">
<div class="s_exch_status_inner">
<h1 class="s_exch_status_heading">Status</h1>
<div class="s_exch_status_fields" id="bg">
<div class="s_formrow">
<label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Separation Information</label>
<select id="endpointColorStatusId" name="endpointStatusDtos[0].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
<option value="-1">Select One</option>
<option style="background-color: #00FFFF;" value="2">Actively Testing</option>
<option style="background-color: #9ACD32;" value="1">Implemented</option>
<option style="background-color: #FF0000;" value="4" selected="selected">Issues</option>
<option style="background-color: #DB7093;" value="5">Other Requirements not in place</option>
<option style="background-color: #FFA500;" value="3">State In Development</option>
<option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
</select>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId: "endpointStatusDtos0.endpointColorStatus.endpointColorStatusId",
widgetType: "dijit.form.FilteringSelect",
widgetAttrs: {
ignoreCase: true,
autoComplete: false
}
}));
</script>
</div>
<div class="s_formrow">
<label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Earnings Verification</label>
<select id="endpointColorStatusId" name="endpointStatusDtos[1].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
<option value="-1">Select One</option>
<option style="background-color: #00FFFF;" value="2">Actively Testing</option>
<option style="background-color: #9ACD32;" value="1">Implemented</option>
<option style="background-color: #FF0000;" value="4">Issues</option>
<option style="background-color: #DB7093;" value="5" selected="selected">Other Requirements not in place</option>
<option style="background-color: #FFA500;" value="3">State In Development</option>
<option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
</select>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId: "endpointStatusDtos1.endpointColorStatus.endpointColorStatusId",
widgetType: "dijit.form.FilteringSelect",
widgetAttrs: {
ignoreCase: true,
autoComplete: false
}
}));
</script>
</div>
<div class="s_formrow">
<label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Monetary Charge</label>
<select id="endpointColorStatusId" name="endpointStatusDtos[2].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
<option value="-1">Select One</option>
<option style="background-color: #00FFFF;" value="2">Actively Testing</option>
<option style="background-color: #9ACD32;" value="1">Implemented</option>
<option style="background-color: #FF0000;" value="4" selected="selected">Issues</option>
<option style="background-color: #DB7093;" value="5">Other Requirements not in place</option>
<option style="background-color: #FFA500;" value="3">State In Development</option>
<option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
</select>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId: "endpointStatusDtos2.endpointColorStatus.endpointColorStatusId",
widgetType: "dijit.form.FilteringSelect",
widgetAttrs: {
ignoreCase: true,
autoComplete: false
}
}));
</script>
</div>
<div class="s_formrow">
<label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Determination Decision</label>
<select id="endpointColorStatusId" name="endpointStatusDtos[6].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
<option value="-1">Select One</option>
<option style="background-color: #00FFFF;" value="2">Actively Testing</option>
<option style="background-color: #9ACD32;" value="1" selected="selected">Implemented</option>
<option style="background-color: #FF0000;" value="4">Issues</option>
<option style="background-color: #DB7093;" value="5">Other Requirements not in place</option>
<option style="background-color: #FFA500;" value="3">State In Development</option>
<option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
</select>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId: "endpointStatusDtos6.endpointColorStatus.endpointColorStatusId",
widgetType: "dijit.form.FilteringSelect",
widgetAttrs: {
ignoreCase: true,
autoComplete: false
}
}));
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function changeFontColor(rgb) {
var x = rgb;
var colors = rgb.match(/^rgb'(('d+),'s*('d+),'s*('d+)')$/);
var brightness = 1;
var r = colors[1];
var g = colors[2];
var b = colors[3];
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
if (yiq <= 128) {
//alert(yiq);
$('#endpointColorStatusId').css('color', 'white');
}
}
jQuery(document).ready(function() {
//$('#endpointColorStatusId option:selected').each(function(){
$('#bg').find('option:selected').each(function() {
var color = ($(this).css('background'));
alert(color);
$('#endpointColorStatusId').css('background', color);
test(color);
});
});
</script>
您的问题是元素id在页面上必须是唯一的。所以你应该用类来代替:
$('#bg').find('option:selected').each(function () {
var color = $(this).css('background');
$('.s_medium').css('background', color);
test(color);
});
关于你的第二个问题，它只适用于Chrome。不幸的是，你的运气不好，因为设置背景色(和一般的样式)的选项元素不是100%跨浏览器。我建议你要么使用自定义下拉插件，要么不要做特定的选项样式。
演示:http://jsfiddle.net/ava2v8yw/2/
相关文章：
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection）
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 禁用jQuery中的下拉列表
- 如何在按钮中显示下拉列表中选定的元素
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 如何使用PHP和JS级联三个下拉列表
- 如何在使用剑道 MVVM 下拉列表时强制选择第一项
- 语义ui如何使用javascript启用或禁用下拉列表
- 无法使用PHP动态设置下拉列表中的值
- 如何根据对具有多行的先前列表的选择来动态加载下拉列表
- 下拉列表在使用z索引放置在前面后停止工作
- 从多维嵌套json数组创建下拉列表
- 如何在剑道下拉列表中按文本和值搜索
- 使用下拉列表筛选列表(ul>li）
- 如何使用jquery从下拉列表(javascript）中选择192.168.3.0进行测试自动化
- 使用codeigniter的多链下拉列表
- 在jquery中迭代多个下拉列表
