选择一个选项两次时jQuery显示消息

Question

我有一个简单的输入文本和另一个选项选择下拉列表的表单。所以我的标记是这样的

 <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>

在表单下，我有一个名为“添加行”的按钮。因此，当有人单击它时，它将添加另一行以及另一个按钮作为删除，这将删除具有该选定按钮行的行。 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) 时，它应该显示一条警报消息，抱歉之前选择了选项名称.那么有人可以告诉我该怎么做吗？任何帮助都会非常显着。谢谢。有什么帮助吗？？

Answer 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");
});

DEMO here.

Answer 2

作为一个概念...

if $( select#service_1 ) exists

    alert("already added")

else

    add new select box

end if

您似乎对 jquery 掌握得很好，可以实现伪代码。

Answer 3

如果我错了，请纠正我，但您似乎想确保用户只能选择每个选项中的一个。换句话说，您希望防止用户在多行上选择 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

Answer 4

可能是带有事件侦听器的 if 语句。

类似的东西；如果是 Service 1，则将 Service1 作为 Service1 进行侦听，如果是这样 = Biggity bam！

下面的内容可能会让你朝着正确的方向前进。

  if (Service1) init();
        else addEventListener(Event.yourstuffhere, init);
    }