Soru Bir html seçim kutusunda seçilen seçenekleri nasıl sınırlarsınız?


Birden fazla seçim yapmanıza olanak tanıyan bir formda bir seçme etiketi kullanıyorum, ancak 10'a kadar maksimum seçim miktarını yapmak istiyorum. Bu, javascript veya jquery kullanılarak mümkün mü?

Şimdiden teşekkürler!


25
2018-01-12 02:00


Menşei


StackOverflow'a hoş geldiniz, Tomated! - Sampson
Tamam, onu daha çok tartışacağım. Her çalışanın adı ile otomatik olarak oluşturulmuş bir seçim kutusu ile dahili bir şirket e-posta formu. Güncellemeye başladım, bu yüzden daha önce seçmiş olduğunuz isimleri gösterecektir (bu bir looooooong listesidir) ve bu yüzden 10'dan fazla isim seçmediğiniz bazı istemci doğrulamaları vardır (bunu önlemek için ciddi yan kodlar vardır). . Seçim etiketinin kimliği "recipient_userid" dir. Şimdiye kadar sahip olduğum şeyi yayınlayacağım - tominated
$ (document) .ready (function () {var last_valid_selection = null; $ ("# recipient_userid"). değiştir (function (event) {var selected = ""; $ ("# recipient_userid seçeneği: selected"). function () {selected + = "<li>" + $ (this) .text () + "</ li>";}); $ ("# currentlySelected"). html (selected);}). );}); - tominated
Olası kopya Çoklu Seçim limit seçim sayısı - Stranger


Cevaplar:


Kullanmanız gereken bazı kodlar ... Google AJAX API Playground :-) 'i sevmem lazım

1'i düzenle: Not: Bu sadece 5'i seçmenize izin veriyor çünkü başka bir 10 seçenek kopyalamak / yapıştırmak gibi hissetmedim :-)

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Sample Select Maximum with jQuery</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">    </script>
    <script type="text/javascript">
    google.load("jquery", "1");

    $(document).ready(function() {

      var last_valid_selection = null;

      $('#testbox').change(function(event) {
        if ($(this).val().length > 5) {
          alert('You can only choose 5!');
          $(this).val(last_valid_selection);
        } else {
          last_valid_selection = $(this).val();
        }
      });
    });
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <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>
    </select>
  </body>
</html>

gösteri


29
2018-01-12 02:23



Bu neredeyse mükemmel! last_valid_selection bir dizi ise tekrar seçmez. Yine de teşekkürler! - tominated
Ne anlatmak istediğinden emin değilim. Ne tekrar seçmezse last_valid_selection dizi mi - Topher Fangio
Taşımak isteyebilirsiniz last_valid_selection küresel kapsam dışında ve ready anonim işlev - Justin Johnson
@Justin Johnson - İyi nokta. Hala neyin işe yaramadığı konusunda kafam karışık. Chrome'da mükemmel çalışır (şu anda IE'yi test edemez). - Topher Fangio
@Topher, zihinleri okumaya hazır olmadıkça cevap vermeyin! :) - Sampson


Bu, kullanıcıyı 3 seçenekle sınırlar:

$("select").on("click", "option", function () {
    if ( 3 <= $(this).siblings(":selected").length ) {
        $(this).removeAttr("selected");
    }
});​​​​​​​​​​

Keman: http://jsfiddle.net/2GrYk/


15
2018-01-12 02:27



harika çözüm - basit ve noktaya! Teşekkürler :) - Sagive SEO
Klavye ya da glide'nin tıklanması durumunda bu işe yaramaz. - zessx


Bu cevap şu durumlarda çalışır:

  • Normal tıklama
  • Sadece mousedown (fare fareçıldan önce dışarı taşınır)
  • Tuş takımı
  • Aynı değere sahip farklı seçenekler varsa

Kod:

$('#mySelect').on('change', function() {
    if (this.selectedOptions.length < 4) {
        $(this).find(':selected').addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

gösteri

Ya da desteklemeyen eski tarayıcılar için selectedOptions,

$('#mySelect').on('change', function() {
    var $sel = $(this).find(':selected');
    if ($sel.length < 4) {
        $sel.addClass('selected');
        $(this).find(':not(:selected)').removeClass('selected');
    }else
        $(this)
        .find(':selected:not(.selected)')
        .prop('selected', false);
});

gösteri


4
2018-05-27 23:53





JQuery'yi kullanarak, değişiklik olayına bir işlev ekleyebilirsiniz ve bir çoklu seçim olduğundan val () bir dizi olacaktır. Her zaman dizinin uzunluğunu kontrol edebilir ve önceden belirlenmiş bir boyutta bir şeyler yapabilirsiniz. Aşağıdaki kod, kaç öğenin seçildiğini nasıl bileceğinizi gösterir.

  $("#select").change(function(){
        alert($(this).val().length);
  });   

3
2018-01-12 02:15



Bu çok yardımcı olacaktır. Seçme kutusundaki evrything seçimini kaldırmak için bir yol var mı? - tominated
@tominated - jQuery'yi kullanarak kolayca arayabilirsiniz $('#myselectbox_id').val(null); - Topher Fangio
Bunu kullanabilirsiniz: $("#select").val([]); Seçim listesinde hiçbir seçeneği ayarlamak için - Vincent Ramdhanie
veya @Topher önerdiği gibi. - Vincent Ramdhanie


anladım! İşte ortaya çıkan kod:

$(document).ready(function(){

var last_valid_selection = null;
var selected = "";

$("#recipient_userid").change(function(event){

    if ($(this).val().length > 10) {

        alert('You can only choose 10!');
        $(this).val(last_valid_selection);

    } else {

        last_valid_selection = $("#recipient_userid").val();

        $("#recipient_userid option:selected").each(function () {
            selected += "<li>" + $(this).text() + "</li>";
        });

        $("#currentlySelected").html(selected);
        selected = "";
    }

}).change();
});

Tüm yardımların için teşekkürler!


2
2018-01-12 03:23



Tominated, bu bir forum değil. Katkılarınız sadece orijinal soruda mevcut olmalıdır (istediğiniz kadar düzenleyebilirsiniz). Burada sağlanan pek çok iyi cevaptan birini kabul etmelisiniz. - Sampson
Tomated, Jonathan kesinlikle doğru. Buradaki fikir bir soru sormak ve en iyi cevabı seçmek (bunu yapmak için bile birkaç ün elde edersiniz). Çok nadiren bir cevap seçmiyorum ve daha da nadiren kendi sorumu cevaplamam. Ancak, bu topluluk birbirimize yardım etmek için burada ve size yardım ettiğimize sevindim. - Topher Fangio
Üzgünüm çocuklar, bunun farkında değildim. - tominated


Belirli bir kimliğe özel bir şey yapmak için temel olarak verilen cevaplardan birkaçını birleştirdim:

$("#mySelect").on("click", "option", function(){
    var max = 3;
    if ( max <= $(this).siblings(":selected").length ) {
        alert("Only " + max + " selections allowed.");
        $(this).removeAttr("selected");
    }
});

soymak


1
2018-05-25 19:23





JQuery'yi kullanabilirsiniz

  $("select").change(function () {
      if($("select option:selected").length > 3) {
          //your code here
      }
  });

0
2018-01-04 12:55





İşte bu kadar! JQuery gerekli değil.

    var is = 0;
    for (var i = 0; i < selectCountryCode.length; i++) {
        if (selectCountryCode.options[i].selected) {
            is++;
        }
        if (is > 3) {
            selectCountryCode.options[i].selected = false;              
        }
    }

Jilusan


0
2018-03-18 16:05



Bu örnek, belki de o zamandan beri jQuery içerecektir niyetiyle, tamamlanmamış görünüyor? SelectCountryCode nedir? - Lev