Wie zu entfernen/auszublenden, wählen Sie Optionen aus select-Liste

Ich habe eine select-Liste wie diese:

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

Leider kann ich ihn nicht Bearbeiten.
Gibt es eine Methode, die lassen Sie mich ausblenden die "Produkt 4" - option standardmäßig?
Ich versuche mit CSS, aber es funktioniert nicht mit IE.

InformationsquelleAutor user2132234 | 2013-07-15

9

Es zu verbergen, wickeln Sie es mit einem span-tag.
```
$( "#selectlist option[value=4]" ).wrap( "<span>" );
```
Zeigen Sie, wickeln Sie das span-tag, wenn er eines hat.
```
if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}
```
- Das wäre illegal HTML
- Ich glaube nicht, dass "illegale" und "Lösung" haben keine Beziehung oder der Welt Aussehen könnte sehr viel anders aus. Aber könnte dies ein einfacher Weg, um zu entfernen: $( "#selectlist span > die option[Wert=4]" ).unwrap();
- Dies funktioniert nur, wenn Sie jQuery verwenden.
InformationsquelleAutor walterquez
5

verwenden von css zum ausblenden von Optionen wird nicht unterstützt in IE, so müssen Sie zum aktualisieren der options Liste selbst.

Versuchen Sie so etwas wie
```
$('#selectlist option[value=4]').remove();
```
Demo: Fiddle

oder wenn Sie wollen, um es zu aktivieren, später
```
var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()
```
Demo: Fiddle
- Weiß nicht warum, aber es doesen ' T work... ich bin mit dem JQuery-Nr. Konflikt-Methode, aber nichts...
- wenn Sie mit noConflict dann statt $ verwenden jQuery
- Ich bin mit var $nol = jQuery.noConflict(); und ändern Sie die "$" mit "$nol" in Ihrer Funktion, ist es der richtige Weg?
- ja, es ist
- kannst du die zugehörige jquery-code, sowie
- Hier ist die web-url ein: provagas1860.opentur.er/destinazioni Der select-Liste auf der rechten Seite!
- Sie haben ein js-Fehler zu beheben erste Uncaught TypeError: Cannot call method 'getElementsByTagName' of null
- auch, wo ist das Skript Hinzugefügt
- behoben, aber es doesen ' T work
InformationsquelleAutor Arun P Johny
2

Können Sie die ausblenden-option mit der folgenden Zeile gehören, in scripting.
```
    $("#selectlist option[value='4']").hide();
```
Und wenn Sie wollen wieder zeigen, diese option, verwenden Sie folgende Zeile.
```
   $("#selectlist option[value='4']").show();
```
- Dies funktioniert nur, wenn Sie jQuery verwenden.
InformationsquelleAutor sandeepghuge141

Können Sie "verstecken" - option, indem es in einen versteckten select-element oder zwischengespeicherte Dokument-fragment, dann verschieben Sie es zurück, wenn Sie wollen, um es zu zeigen:

var selectTool = (function() {
  var frag = document.createDocumentFragment();
  return {
    hideOpt: function (selectId, optIndex) {
      var sel = document.getElementById(selectId);
      var opt = sel && sel[optIndex];
      console.log(opt);

      if (opt) {
        frag.appendChild(opt);
      }
    },

    showOpt: function (selectId) {
      var sel = document.getElementById(selectId);
      var opt = frag.firstChild;
      if (sel && opt) {
        sel.appendChild(opt);
      }
    }
  }
}());

Dann können Sie verstecken die 4. option wie:

<input type="button" value="Hide option" onclick="
  selectTool.hideOpt('selectlist',4);
">

und zeigen Sie es erneut mit:

<input type="button" value="Show option" onclick="
  selectTool.showOpt('selectlist');
">

Alle spielen code natürlich, aber Sie sollten einige Ideen bekommen. Wenn Sie speichern möchten, viele Optionen, müssen Sie einen Weg, der auf Sie so vielleicht bewahren Sie Sie in einem Objekt mit einer gewissen form von Referenz-Schema.

? Ich brauche nur zu verstecken, ich bin nicht daran interessiert zu zeigen Optionen, indem Sie überall
Gut, die oben genannten "versteckt" die option. Wenn Sie nicht brauchen, um es wieder anzuzeigen, entfernen Sie es einfach.

InformationsquelleAutor RobG

1

Um Ihre Zeit zu sparen, Lesen Sie im folgenden beantworten.

OK, ich suchte nach ein paar Stunden und ich bemerkte, dass es KEINE ARBEIT WEG zu "verstecken" (was ich meine ist, stellen Sie die option zeitlich und verschwand aus der drop-down-Liste) für alle Browser, wie die Sichtbarkeit verborgen sein, oder style="display: none".

Meine Letzte Ansatz ist:
1. Erstellen Sie ein array zu speichern, alle Optionen für die dropdown-Liste.
2. Verwenden Sie eine Methode, um dynamisch zu aktualisieren, die in der Dropdown-Liste nach, was Sie sehen möchten.

Ist es, wenn Sie möchten, verwenden Sie eine drop-down-Liste ohne die Verwendung einer Bibliothek

InformationsquelleAutor johnnyman

Versuchen, deaktivieren Sie diese option mit disabled-Attribut.

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" disabled="disabled">Product 4</option>
</select>

Überprüfen demo

Durch die Deaktivierung einer option nicht zu verstecken, es macht es nur nicht auswählbar. Und das disabled-Attribut nicht den Wert.
Ich kann nicht ändern der select-Liste code

InformationsquelleAutor Chirag Vidani

finden Sie unter diesem link

http://jsfiddle.net/DKKMN/

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" id="i">Product 4</option>
</select>


#i{display:none;}

erstellen Sie eine id und in der Art machen unsichtbares

Ich kann nicht ändern der select-Liste code
Diese Lösung versteckt sich nicht, die option im IE11.
Ja, immer Fragen Sie sich: "Das funktioniert, aber was passiert, wenn Microsoft"

InformationsquelleAutor

0

Ich nehme an, Sie sind mit JQuery als gut.
```
$("#selectlist option[value='option4']").remove();
```
- Funktioniert nicht... kann nicht verstehen, warum...
- Was ist der Fehler, die Ihnen, wenn überhaupt?
- kein Fehler, es zeigt einfach die Möglichkeiten, wie Sie es haben nicht alle javascript-script geladen
- Sie sind etwas Durcheinander. Versuchen Sie es mit in-line-Skript statt. Dies ist der Weg. Es sollte funktionieren.
InformationsquelleAutor sla55er

Anhängen, das Kind unter der Liste der option mit Hilfe von java script.

`var option = document.createElement("option");
 option.text = "All Users";
 option.value = "all_user";
 var select = document.getElementById("log_user_type");
 select.appendChild(option);`

InformationsquelleAutor sandeepghuge141

wenn Sie möchten, entfernen Sie eine option aus der Liste wählen Sie Sie können diesen code verwenden:

<script type="text/javascript">
    $(window).bind("load", function() {    
        $('#select_list_id option[value="AB"],option[value="SK"]').remove();
    });
</script>

InformationsquelleAutor sandeep kumar

-3
```
<option value="4" style="display:none">Product 4</option> 
```
versteckt sich die 4. option standardmäßig.
- [insert Programmierung meme hier]
InformationsquelleAutor user8053687

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Um Ihre Zeit zu sparen, Lesen Sie im folgenden beantworten.