用mysql填充的多动态组合框

时间:2012-11-27 10:49:42

标签: php javascript jquery combobox

数据库

$mySql = "SELECT field FROM fields";
$result = mysql_query($mySql);

HTML:

<select id="combo1" class="combo" data-index="1">
<option></option>
<?php
while($r = mysql_fetch_array($result))
{
echo "<option value=" .$r['field '] . ">".$r['field '] ."</option>";
}
?>
</select>
<div id="combos"></div>

的jQuery

<script type="text/javascript">
$('body').on('change', '.combo', function() {
var selectedValue = $(this).val();
if (selectedValue !== '' && $(this).find('option').size() > 8) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
$('.parentCombo' + thisComboBoxIndex).remove();
newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
newComboBox.find('option[val="' + selectedValue + '"]').remove();
$('#combos').append(newComboBox);
}
});
</script>

问题: 此代码使用我的数据库talble字段创建组合框。 我的问题是,选择一次后字段不能重复。 代码中的错误在哪里?或者我的错误是什么?

应该是这样的:http://jsfiddle.net/JaVVe/1/

2 个答案:

答案 0 :(得分:1)

问题是你正在检查size() > 8,所以它的工作必须有8个以上的选项。将其更改为size() > 2。除此之外,您的代码将起作用。

另一个问题是您没有将选项值包装在引号中。添加引号:

echo "<option value=\"" .$r['field'] . "\">".$r['field'] ."</option>";

你还有一个空格:

 $r['field ']
 //       ^ here, remove that

答案 1 :(得分:1)

网站示例

<option val="Opt1">

在您的html中,value属性而不是val,因此您需要更改

newComboBox.find('option[val="' + selectedValue + '"]').remove();

newComboBox.find('option[value="' + selectedValue + '"]').remove();