webentwicklung-frage-antwort-db.com.de

Wie entferne ich Auswahloptionen aus der Auswahlliste?

Ich habe eine Auswahlliste 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 es nicht bearbeiten. Gibt es eine Methode, mit der ich standardmäßig die Option "Produkt 4" ausblenden kann? Ich versuche es mit CSS, aber es funktioniert nicht mit IE .

10
user2132234

Um es auszublenden, wickeln Sie es mit einem Span-Tag ein.

$( "#selectlist option[value=4]" ).wrap( "<span>" );

Um es darzustellen, wickeln Sie das span-Tag aus, falls vorhanden.

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}
9
walterquez

die Verwendung von css zum Ausblenden von Optionen wird im IE nicht unterstützt. Daher müssen Sie die Liste options selbst aktualisieren.

Versuchen Sie etwas wie

$('#selectlist option[value=4]').remove();

Demo: Fiddle

oder wenn Sie es später aktivieren möchten

var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()

Demo: Fiddle

5
Arun P Johny

Sie können die Option mithilfe des folgenden Zeileneinschlusses in der Skriptfunktion ausblenden.

    $("#selectlist option[value='4']").hide();

Wenn Sie diese Option erneut anzeigen möchten, verwenden Sie die folgende Zeile.

   $("#selectlist option[value='4']").show();
2
sandeepghuge141

Um Zeit zu sparen, lesen Sie bitte die folgende Antwort.

OK, ich suchte ein paar Stunden und bemerkte, dass es für alle Browser, wie z. B., gibt es KEINE ARBEITSWEISE , um "auszublenden" (was ich meine, die Option vorübergehend aus der Dropdown-Liste verschwinden zu lassen) Stellen Sie die Sichtbarkeit als ausgeblendet ein oder style = "display: none".

Mein letzter Ansatz lautet: 1. Erstellen Sie ein Array, um alle Optionen für die Dropdown-Liste zu speichern. 2. Verwenden Sie eine Methode, um die Dropdown-Liste dynamisch entsprechend der gewünschten Anzeige zu aktualisieren .

Das ist es, wenn Sie eine Dropdown-Liste verwenden möchten, ohne eine Bibliothek zu verwenden 

1
johnnyman

Sie können die Option "ausblenden", indem Sie sie in ein ausgeblendetes Auswahlelement oder ein zwischengespeichertes Dokumentfragment verschieben und dann nach hinten verschieben, wenn Sie es anzeigen möchten:

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 die vierte Option wie folgt ausblenden:

<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 natürlich Code, aber Sie sollten sich ein paar Ideen holen. Wenn Sie viele Optionen speichern möchten, benötigen Sie eine Möglichkeit, diese zu referenzieren. Speichern Sie sie in einem Objekt mit einer Art Referenzschema.

1
RobG

siehe diesen 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 machen Sie sie im Stil unsichtbar

0
user2028750

Ich nehme an, Sie verwenden auch JQuery.

$("#selectlist option[value='option4']").remove();
0
sla55er

wenn Sie eine Option aus der Auswahlliste entfernen möchten, können Sie diesen Code verwenden:

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

das Kind unter der Liste der Optionen mit Java-Skript anhängen.

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

Versuchen Sie, diese Option mit deaktiviertem Attribut zu deaktivieren.

<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 Sie Demo

0
Chirag Vidani