Question

美好的一天

我有3个选择框。现在我想做的是允许用户只选择其中一个框中的值，但不能超过一个框。这些盒子可能都是空的。

因此，您可以选择以下其中一项来让提交成功：

无（---）要么 1/2 / 3 要么蓝/绿/紫要么大/中/小

<select>
      <option>---</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
    <br /><br />
    <select>
      <option>---</option>
      <option>Blue</option>
      <option>Green</option>
      <option>Purple</option>
    </select>
    <br /><br />
    <select>
      <option>---</option>
      <option>Big</option>
      <option>Medium</option>
      <option>Small</option>
    </select>
    <br /><br />
    <input type="submit" />

的jQuery

$('input[type="submit"]').click(function(){

$('select').each(function() {
     var i = 0;
     if($(this).attr('option','selected').val() != "---"){
        i++;
     };
  });

if(i > 1){
        $('input[type="submit"]').prop('disabled', true);
        alert('You can only choose one option!');
}
else {
        alert('Form Submitted successfully');
}

});

但这根本不起作用。

查看我的JSFiddle

Answer 1

在i函数之前定义each，使其成为click函数中的全局范围，并在if条件下访问：

var i = 0;
$('select').each(function() {

<强> Updated Fiddle

Answer 2

你的意思是：

http://jsfiddle.net/2DzUV/18/

 $('select').on('change', function () {
        $('select').not(this).val("");
    });

Answer 3

这是因为在迭代i元素列表时正在重置变量<select>的范围。将第4行var i = 0;移到第2行，即在嵌套循环之外。

Answer 4

您需要在每个函数之外移动变量i的创建，如下所示：

$('input[type="submit"]').click(function(){

var i = 0; // <-- this was moved to here
$('select').each(function() {
     if($(this).attr('option','selected').val() != "---"){
        i++;
     };
  });

if(i > 1){
        $('input[type="submit"]').prop('disabled', true);
        alert('You can only choose one option!');
}
else {
        alert('Form Submitted successfully');
}

});

由于它是在每个函数内部创建的，因此在退出该函数后会被销毁，并且当您测试它大于一时，该值就不再存在。

jQuery验证 - 在3个选择框之间只选择一个选项

4 个答案: