如何在html中选择一些限制后禁用下拉列表元素

我在我的选择下拉列表中有30个元素。但我需要限制用户只选择其中的10个。一旦他选择了10个元素，其他人应该禁用。我如何使用java脚本来做到这一点？如何在html中选择一些限制后禁用下拉列表元素

2015-05-29 Vimal Kumar

向我们展示你尝试过什么。您的代码。 [这]（https://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html）可以帮助你 –

使用下面的jQuery代码

$(document).ready(function() { 

    var last_valid_selection = null; 

    $('#testbox').change(function(event) { 
    if ($(this).val().length > 10) { 
     alert('You can only choose 5!'); 
     $(this).val(last_valid_selection); 
    } else { 
     last_valid_selection = $(this).val(); 
    } 
    }); 
});

HTML是继

<select multiple id='testbox'> 
    <option value='1'>First Option</option> 
    <option value='2'>Second Option</option> 
    <option value='3'>Third Option</option> 
    <option value='4'>Fourth Option</option> 
    <option value='5'>Fifth Option</option> 
    <option value='6'>Sixth Option</option> 
    <option value='7'>Seventh Option</option> 
    <option value='8'>Eighth Option</option> 
    <option value='9'>Ninth Option</option> 
    <option value='10'>Tenth Option</option> 

    <option value='11'>First Option</option> 
    <option value='12'>Second Option</option> 
    <option value='13'>Third Option</option> 
    <option value='14'>Fourth Option</option> 
    <option value='15'>Fifth Option</option> 
    <option value='16'>Sixth Option</option> 
    <option value='17'>Seventh Option</option> 
    <option value='18'>Eighth Option</option> 
    <option value='19'>Ninth Option</option> 
    <option value='20'>Tenth Option</option> 

    <option value='21'>First Option</option> 
    <option value='22'>Second Option</option> 
    <option value='23'>Third Option</option> 
    <option value='24'>Fourth Option</option> 
    <option value='25'>Fifth Option</option> 
    <option value='26'>Sixth Option</option> 
    <option value='27'>Seventh Option</option> 
    <option value='28'>Eighth Option</option> 
    <option value='29'>Ninth Option</option> 
    <option value='30'>Tenth Option</option> 
</select>

上面的代码是从这里How do you limit options selected in a html select box?

Demo

来源

2015-05-29 04:50:08 Alex

我可以在java脚本中做同样的事吗？目前我不在我的应用程序的任何地方使用jquery，所以我不想使用它。 –

您可以限制多选择喜欢用下面的方式JQuery的。

$("select").on("click", "option", function (event) { 
    if ($(this).siblings(":selected").length >= 5) { 
     $(this).removeAttr("selected"); 
    } 
});

检查Fiddle

来源

2015-05-29 04:55:36 ketan

您还可以使用 $（'＃mySelect选项：not（：selected）'）来禁用其余的。禁用，使其启用 – Newinjava

@Newinjava是的，你写。这里我只是展示我们如何限制。不管怎样，谢谢。 – ketan

我创建仅选择值

例如：http://jsfiddle.net/kevalbhatt18/yYW89/1468/

<select onchange="myFunction()" id="selectNumber"> 
    <option >Choose a number</option> 
</select>

<script> 
    var t = []; 

    function myFunction() { 
     var select = document.getElementById("selectNumber"); 
     var selectedString = select.options[select.selectedIndex].value; 

     if (t.length < 10) { 
      t.push(selectedString) 
     } else { 

      return 
     } 
     console.log(t) 
    } 
</script>

对于下拉填充

var select = document.getElementById("selectNumber"); 
var options = ["1", "2", "3", "4", "5","6","7","8","9","10","11"]; 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
}

来源

2015-05-29 05:02:07

JavaScript解决方案之

function checkSelected(el) { 
 
    var opts = document.getElementsByTagName("option"); 
 
    var cnt = 0; 
 
    for (var i = 0; i < opts.length; i++) { 
 
    if (opts[i].selected == true) { 
 
     cnt++; 
 

 
     if (cnt > 10) { 
 
     opts[i].selected = false; 
 
     opts[i].disabled = true; 
 
     } 
 
     opts[i].disabled = false; 
 
    } 
 

 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <select multiple id="s" onchange="checkSelected(this);" style="height: 200px;width : 200px;"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    <option>Option 4</option> 
 
    <option>Option 5</option> 
 
    <option>Option 6</option> 
 
    <option>Option 7</option> 
 
    <option>Option 8</option> 
 
    <option>Option 9</option> 
 
    <option>Option 10</option> 
 
    <option>Option 11</option> 
 
    <option>Option 12</option> 
 
    <option>Option 13</option> 
 
    <option>Option 14</option> 
 
    <option>Option 15</option> 
 
    <option>Option 16</option> 
 
    <option>Option 17</option> 
 
    <option>Option 18</option> 
 
    <option>Option 19</option> 
 
    <option>Option 20</option> 
 
    <option>Option 21</option> 
 
    <option>Option 22</option> 
 
    <option>Option 23</option> 
 
    <option>Option 24</option> 
 
    <option>Option 25</option> 
 
    <option>Option 26</option> 
 
    <option>Option 27</option> 
 
    <option>Option 28</option> 
 
    <option>Option 29</option> 
 
    <option>Option 30</option> 
 
    </select>

来源

2015-05-29 09:48:44 varadk

如何在html中选择一些限制后禁用下拉列表元素

回答

相关问题