如何根据数据库中的值遍历多个选择和设置选项?
How to iterate through multiple selects and set option based on the value from DB?
我一直在处理我的项目,我的页面包含一个 table 多行,每行都有 select(下拉)。
到目前为止,每个 select 都有一个选项。该选项具有从数据库分配的值。
我想在页面加载后遍历页面上的所有 select。然后,如果 select 的值为 -1,我想将下拉列表默认为 NO,第二个选项应为 YES,值为 0。
这是我的 table 的样子:
1 8:00 AM - 8:30 AM SELECT
2 8:30 AM - 9:00 AM SELECT
3 9:00 AM - 9:30 AM SELECT
4 9:30 AM - 10:00 AM SELECT
这是我的 HTML 代码:
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="~(USER_ID)"></option>
</select>
</label>
</td>
</tr>
我在 JQuery 中尝试过这样的事情:
<script>
$j( document ).ready(function() {
$j('.dropBox').each(function() {
if($j(this).val() == "-1" || $j(this).val() == ""){
$j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
}
if($j(this).val() == "0" ){
$j('.dropBox').find("option").eq(0).hide();
$j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
}
});
});
</script>
上面的代码在每一行中给了我很多是和否选项。那不是我想要的。使它起作用的另一种方法是什么?我是否应该通过每个 ID 或其他方式检查值?
$j = jQuery;
$j(document).ready(function() {
$j('.dropBox').each(function() {
if ($j(this).val() == "-1" || $j(this).val() == "") {
$j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
}
if ($j(this).val() == "0") {
$j('.dropBox').find("option").eq(0).hide();
$j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="0"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="-1"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="2"></option>
</select>
</label>
</td>
</tr>
</table>
您正在对 所有 .dropBox
进行修改,而您只是打算在循环迭代的当前 .dropBox
上这样做。
对于 .each
循环,回调将迭代器索引作为第一个参数,将元素作为第二个参数。上下文也是您似乎已经正确但后来没有使用的元素?
$j = jQuery;
$j(document).ready(function() {
$j('.dropBox').each(function(index, dropBox) {
// Instead of appending options to every .dropBox, only do it for this one.
var $select = $j(this); // or $j(dropBox);
var val = $select.val();
if (val == "-1" || val == "") {
$select.append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
} else if (val == "0") {
$select.find("option").eq(0).remove(); // You can't hide an option. I am presuming you wanted the first option removed?
$select.append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="0"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="-1"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="2"></option>
</select>
</label>
</td>
</tr>
</table>
我一直在处理我的项目,我的页面包含一个 table 多行,每行都有 select(下拉)。
到目前为止,每个 select 都有一个选项。该选项具有从数据库分配的值。
我想在页面加载后遍历页面上的所有 select。然后,如果 select 的值为 -1,我想将下拉列表默认为 NO,第二个选项应为 YES,值为 0。
这是我的 table 的样子:
1 8:00 AM - 8:30 AM SELECT
2 8:30 AM - 9:00 AM SELECT
3 9:00 AM - 9:30 AM SELECT
4 9:30 AM - 10:00 AM SELECT
这是我的 HTML 代码:
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="~(USER_ID)"></option>
</select>
</label>
</td>
</tr>
我在 JQuery 中尝试过这样的事情:
<script>
$j( document ).ready(function() {
$j('.dropBox').each(function() {
if($j(this).val() == "-1" || $j(this).val() == ""){
$j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
}
if($j(this).val() == "0" ){
$j('.dropBox').find("option").eq(0).hide();
$j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
}
});
});
</script>
上面的代码在每一行中给了我很多是和否选项。那不是我想要的。使它起作用的另一种方法是什么?我是否应该通过每个 ID 或其他方式检查值?
$j = jQuery;
$j(document).ready(function() {
$j('.dropBox').each(function() {
if ($j(this).val() == "-1" || $j(this).val() == "") {
$j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
}
if ($j(this).val() == "0") {
$j('.dropBox').find("option").eq(0).hide();
$j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="0"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="-1"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="2"></option>
</select>
</label>
</td>
</tr>
</table>
您正在对 所有 .dropBox
进行修改,而您只是打算在循环迭代的当前 .dropBox
上这样做。
对于 .each
循环,回调将迭代器索引作为第一个参数,将元素作为第二个参数。上下文也是您似乎已经正确但后来没有使用的元素?
$j = jQuery;
$j(document).ready(function() {
$j('.dropBox').each(function(index, dropBox) {
// Instead of appending options to every .dropBox, only do it for this one.
var $select = $j(this); // or $j(dropBox);
var val = $select.val();
if (val == "-1" || val == "") {
$select.append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
} else if (val == "0") {
$select.find("option").eq(0).remove(); // You can't hide an option. I am presuming you wanted the first option removed?
$select.append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="0"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="-1"></option>
</select>
</label>
</td>
</tr>
<tr>
<td>~(ORDER)</td>
<td>~(TIMESLOT)</td>
<td>
<label>
<select id="blockTime_~(recordID)" name="" class="dropBox">
<option value="2"></option>
</select>
</label>
</td>
</tr>
</table>