Question

我有多个选择选项，但有相同的验证 - 警告说“请选择一个选项”

它以这种方式工作。 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);

Answer 1

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

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

请注意，我将live调用更改为on;你的jQuery版本可能已经过时了，但仍然暴露了这个方法，但它已被标记为首先过时，然后完全从库中删除，未来的版本建议使用on或委托。

供参考：

从jQuery 1.7 开始，不推荐使用.live（）方法。使用.on（）来附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。

Answer 2

我建议采用以下方法：

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

JS Fiddle demo

或以下内容：

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

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

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

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

我建议如下：

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

JS Fiddle demo

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

Answer 3

您可以通过执行来缩短它（我还将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");
    }
}

Fiddle

Answer 4

看看这个编辑（查看更新的按钮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;
    }
});

多个选择选项相同的验证

4 个答案: