1

我有多个选择选项，但验证相同 - 提醒说“请选择一个选项”

它以这种方式工作。http://jsfiddle.net/19eggs/p8j2v/5/有没有办法缩短这个？我一直在思考这些问题，但我在某个地方出错了..;o（（你能帮忙吗？

function select_option() {
  if ($("#european")[0].selectedIndex <= 0 || $("#japanese")[0].selectedIndex <= 0  || $("#american")[0].selectedIndex <= 0 {
    alert("Please choose a car"); 
    } ;
$("#assign-euro").live("click",select_option);
$("#assign-jpn").live("click",select_option);
$("#assign-american").live("click",select_option);
4

4 回答 4

0

您可以在 jQuery 中指定多个选择器，用逗号分隔，例如：

$("#assign-euro, #assign-jpn, #assign-american").on("click", select_option);

请注意，我将live呼叫更改为on; 您的 jQuery 版本可能是旧版本并且仍然公开此方法，但它已被标记为首先过时，然后从库中完全删除，未来版本建议使用on或委托。

以供参考：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

于 2013-08-20T12:17:03.953 回答
0

我建议采用以下方法：

$('select').blur(function(){
    var self = this;
    if (!self.value.length) {
        alert('Please choose a ' + self.id + ' car.');
        $(self).focus();
    }
});

JS 小提琴演示。

或以下内容：

function enforceSelection () {
    var self = this,
        nationality = self.id;
    if (this.value.length === 0) {
        alert('Please choose a ' + nationality + ' car.');
        $(self).focus();
    }
}

$('#european, #japanese, #american').on('blur', enforceSelection);

JS 小提琴演示。

请注意，on()在 jQuery 1.7.2 中受支持（在您链接的 Fiddle 中使用，如果您使用的是旧版本的 jQuery，请更新问题和其中的 Fiddle，以显示您正在使用的版本）。

鉴于提供的附加信息（在下面的评论中）：

...仅当单击相应的按钮时才会发生警报，​​因为页面上有其他链接。

我建议如下：

$('button[id^="assign"]').click(function(){
    var id = this.id.replace(/assign-/,'');
    if ($('#' + id).val().length === 0) {
        alert('Please choose a ' + id + ' car.');
    }
});

JS 小提琴演示。

请注意，我已将id前两个按钮元素的 s 更改为，以便它们的后半部分id（在连字符之后）与自身相关id的元素匹配。button

于 2013-08-20T12:18:36.963 回答
0

您可以通过这样做来缩短它（我也替换live为on，live现在已弃用）：

$("#assign-euro, #assign-jpn, #assign-american").on("click", function () {
    carValidate($(this).parent().prevAll("select"));
});

function carValidate(list) {
    if (list.val() == "") {
        alert("Please choose a car");
    }
}

小提琴

于 2013-08-20T12:19:16.033 回答
0

看看这个编辑（看看更新的按钮 ID）（http://jsfiddle.net/mynetx/p8j2v/9/）：

<select id="european">
  <option selected="selected" value="">Please select</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br/>

<p><button id="assign-european">Assign European Cars</button> </p>
<br/><br/>

<select id="japanese">
  <option selected="selected" value="">Please select</option>
  <option value="nissan">Nissan</option>
  <option value="toyota">Toyota</option>
  <option value="mitsubihi">Mitsubishi</option>
  <option value="honda">Honda</option>
</select>
<br/> 
<p><button id="assign-japanese">Assign Japanese Cars</button> </p>
<br /><br />
<select id="american">
  <option selected="selected" value="">Please select</option>
  <option value="jeep">Jeep</option>
  <option value="ford">Ford</option>
  <option value="chrysler">Chrysler</option>
  <option value="chevrolet">Chevrolet</option>
</select>
<p><button id="assign-american">Assign American Cars</button> </p>

$("button[id^=assign-]").on("click", function () {
    if ($("select#" + $(this).prop("id").substring(7))[0].selectedIndex === 0) {
        alert("Please choose a car");
        return false;
    }
});
于 2013-08-20T12:28:01.130 回答