我有一个简单的输入文本和另一个选项选择下拉列表。所以我的标记就像这样
<div id="form-wrap" style="width:500px; margin: 0 auto;">
<table>
<tr>
<th width="55%">Service Name</th>
<th width="35%">From Price</th>
<th width="10%"></th>
</tr>
<tr id="template">
<td id="example" width="55%">
<select name="service-name" id="service-name" style="width:230px;">
<option value="" selected>--select--</option>
<option value="service-1">service-1</option>
<option value="service-2">service-2</option>
<option value="service-3">service-3</option>
<option value="service-4">service-4</option>
</select>
</td>
<td width="45%"><input type="text" name="from-price" id="from-price" /></td>
<td width="10%"><input type="button" id="remove" value="remove row" /></td>
</tr>
</table>
<input type="button" value="+ Add Row" id="add-row" />
</div>
在表单下我有一个名为Add row的按钮。因此,当有人点击它时,它会添加另一行,另外一个按钮作为删除,这将删除具有所选按钮行的行。 jQuery代码就像这样
<script type="text/javascript">
jQuery(document).ready(function() {
id = 0;
var template = jQuery('#template');
jQuery('#add-row').click(function() {
var row = jQuery(template).clone();
var templateSelectedIndex = template.find("select")[0].selectedIndex;
template.find('input:text').val("");
row.attr('id','row_'+(++id));
row.find('#remove').show();
row.find("select")[0].selectedIndex = templateSelectedIndex;
template.after(row);
});
jQuery('#form-wrap').on('click','#remove',function() {
jQuery(this).closest('tr').remove();
});
});
这里工作正常。这是工作小提琴链接
http://jsfiddle.net/NewUserFiddle/LT7gM/
但在此我想要另一个额外的选择。你可以看到我有像
这样的选项 <select name="service-name" id="service-name" style="width:230px;">
<option value="" selected>--select--</option>
<option value="service-1">service-1</option>
<option value="service-2">service-2</option>
<option value="service-3">service-3</option>
<option value="service-4">service-4</option>
</select>
所以我希望当有人选择一行(lets say Service1)
中的一个选项然后添加另一行并再次选择相同的先前选择的选项(here it is Service1 as Service1 has been selected in previous row)
时,它应该显示一条警告消息,抱歉选项名称已被选中。有人能告诉我怎么做吗?任何帮助都会非常明显。谢谢。任何帮助?
答案 0 :(得分:1)
作为一个概念......
if $( select#service_1 ) exists
alert("already added")
else
add new select box
end if
您似乎很好地掌握了jquery来实现伪代码。
答案 1 :(得分:1)
尝试:
jQuery('#add-row').click(function () {
var row = jQuery(template).clone();
var templateSelectedIndex = template.find("select")[0].selectedIndex;
template.find('input:text').val("");
row.attr('id', 'row_' + (++id));
row.find('#remove').show();
row.find("select")[0].selectedIndex = templateSelectedIndex;
template.after(row);
$("#template").find("select:first option:first").prop("selected","selected");
});
答案 2 :(得分:1)
如果我错了,请纠正我,但看起来好像你想确保用户只能选择其中一个选项。换句话说,您希望阻止用户在多行上选择service-1。
要执行此操作,您可以将事件侦听器附加到每个选择,循环显示所有选择输入,并确保找不到重复项。这是我放在一起的代码:
jQuery('#form-wrap').on('change', 'select',function(event) {
var services = {};
var valid = true;
$('#form-wrap select').each(function(index, element) {
if (services[element.selectedIndex])
valid = false;
if (element.selectedIndex != 0)
services[element.selectedIndex] = true;
});
if (!valid)
{
alert('Sorry, that service has already been selected');
this.selectedIndex = 0;
}
});
这是一个working fiddle
答案 3 :(得分:0)
可能是带有事件监听器的if语句。
喜欢的东西;如果服务1,请将Service1作为Service1监听,如果是这样的话= Biggity bam!
下面可能会让你朝着正确的方向前进。
if (Service1) init();
else addEventListener(Event.yourstuffhere, init);
}