Auswahl nicht wählen Sie die Option, die wählen Zusammenbruch löst

Ich möchte eine bestehende <select>-Tag mit einem zusätzlichen « Mehr ... » Reihe zu verbessern, die, wenn sie ausgewählt wird, eine gewisse Kontrolle GUI anzeigt. Wenn der Benutzer klickt auf « Mehr ... » Ich brauche das:Auswahl nicht wählen Sie die Option, die wählen Zusammenbruch löst

Aktuell gewählter <option> ist
Zusätzliche Reihe erhalten kann nicht
Ausgliederungs

schließt ausgewählt werden

Mein erster Versuch scheitert an # 1 und # 2:

jQuery(function($){ 
 
    $("select").each(function(){ 
 
    var $more = $("<option>See more...</option>") 
 
     .on("click", function(){ 
 
     alert("Put your fancy AJAX dialogue here"); 
 
     }) 
 
     .appendTo($(this)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Choose &laquo;See more...&raquo; for more options:</p> 
 
<select> 
 
    <optgroup label="America"> 
 
    <option value="ca">Canada</option> 
 
    <option value="us">United States</option> 
 
    </optgroup> 
 
    <optgroup label="Europe"> 
 
    <option selected value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select>

Wenn ich ein deaktiviert Attribut « Siehe unten mehr ... » Zeile dann schlägt es anders je nach Browser (Firefox hält die Drop-down offen, Chrome wird nicht Onclick verarbeiten überhaupt) handler:

jQuery(function($){ 
 
    $("select").each(function(){ 
 
    var $more = $("<option>See more...</option>") 
 
     .prop("disabled", true) 
 
     .on("click", function(){ 
 
     alert("Put your fancy AJAX dialogue here"); 
 
     }) 
 
     .appendTo($(this)); 
 
    }); 
 
});

[disabled] { 
 
    font-style: normal; 
 
    color: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Choose &laquo;See more...&raquo; for more options:</p> 
 
<select> 
 
    <optgroup label="America"> 
 
    <option value="ca">Canada</option> 
 
    <option value="us">United States</option> 
 
    </optgroup> 
 
    <optgroup label="Europe"> 
 
    <option selected value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select>

Jede Idee?

Quelle

2017-05-26 Álvaro González

Was bedeutet # 3 bedeuten? Sie meinen Event-Handling? – serkan

Was genau möchten Sie tun? –

@ sekandemirel0420 Ich bin mir nicht sicher, ob Sie die "Run code snippet" -Buttons ausprobiert haben, aber ich habe gerade festgestellt, dass das zweite Snippet nur unter Firefox funktioniert. In Firefox wird die Warnung angezeigt, aber das Dropdown bleibt geöffnet. In z.B. Chrome kann nicht einmal geklickt werden. –

Ich speichere den vorherigen Wert in oldValue und dann, wenn es "Mehr ..." Ich restaurieren den alten Wert ist:

jQuery(function($){ 
 
    var oldValue; 
 
    $("select").on('focus', function() { 
 
     oldValue = this.value;  
 
    }).change(function() { 
 
     if (this.value=='See more...') { 
 
      $("select").val(oldValue); 
 
     } 
 
     oldValue = this.value;  
 
    }).each(function(){ 
 
    var $more = $("<option>See more...</option>") 
 
     .on("click", function(){ 
 
     alert("Put your fancy AJAX dialogue here"); 
 
     }) 
 
     .appendTo($(this)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Choose &laquo;See more...&raquo; for more options:</p> 
 
<select> 
 
    <optgroup label="America"> 
 
    <option value="ca">Canada</option> 
 
    <option value="us">United States</option> 
 
    </optgroup> 
 
    <optgroup label="Europe"> 
 
    <option selected value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select>

Quelle

2017-05-26 08:55:00

Das funktioniert.

<style type="text/css"> 
    .disabled { 
     color: #808080; 
    } 
</style> 


<script type="text/javascript"> 
    jQuery(function($) { 
     $("select").each(function() { 
      var $more = $("<option class='disabled>See more...</option>"); 
      $(this).append($more); 
     }); 


     var options_sel_idx = 0; 

     $("select").on("change", this, function(event) { 
      if ($(this.options[this.selectedIndex]).hasClass("disabled")) { 
       alert("a"); 
       this.selectedIndex = options_sel_idx; 
      } else { 
       options_sel_idx = this.selectedIndex; 
      } 
     }); 
    }); 
</script>

Quelle

2017-05-26 08:44:24 serkan

Versuchen Sie, diese

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
jQuery(function($){ 
 
    $("select").each(function(){ 
 
    var $more = $("<option value='preserve'>See more...</option>") 
 
     .prop("readonly", true) 
 
     .appendTo($(this)); 
 
    }); 
 

 
var previousState = ""; 
 
$("select").on('focus', function() { 
 
     previousState = this.value;  
 
    }).change(function(e){ 
 
\t if($(this).val() == "preserve"){ 
 
    $("select").val(previousState); 
 
    alert("Put your fancy AJAX dialogue here"); 
 
    } 
 
    previousState = this.value; 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<select id="select"> 
 
    <optgroup label="America"> 
 
    <option value="ca">Canada</option> 
 
    <option value="us">United States</option> 
 
    </optgroup> 
 
    <optgroup label="Europe"> 
 
    <option selected value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select> 
 

 
</body> 
 
</html>

Quelle

2017-05-26 09:03:41

Versuchen Sie dies den alten Wert mit globalen Variablen auf click Ereignis speichern .passing die Ajax-Funktion im onchange Ereignis

jQuery(function($) { 
 
    $("select").each(function() { 
 
    $("<option value='extra'>See more...</option>").appendTo($(this)); 
 
    }); 
 
    var old; 
 
    $("select").on('click', function() { 
 
    old = $(this).val(); 
 
    }) 
 
    $('select').on('change', function() { 
 
    if ($(this).val() == 'extra') { 
 
     //do stuff 
 
     console.log("Put your fancy AJAX dialogue here"); 
 
     $(this).children('option').eq($(this).val(old).index()).prop('selected', true); 
 
    } 
 

 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Choose &laquo;See more...&raquo; for more options:</p> 
 
<select> 
 
    <optgroup label="America"> 
 
    <option value="ca">Canada</option> 
 
    <option value="us">United States</option> 
 
    </optgroup> 
 
    <optgroup label="Europe"> 
 
    <option value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select>

Quelle

2017-05-26 09:07:11 prasanth

Kurz:

Das übergeordnete disabled Die Idee ist nicht browserkompatibel (Chrome erfasst keine Klickereignisse es).
Der einfachste Ansatz (Tracking-Wert ändert sich manuell) scheint der beste zu sein.

Nach einigen Verfeinerungen sieht mein letzter Code wie folgt:

jQuery(function ($) { 
 
\t $("select").each(function() { 
 
\t \t var $select = $(this) 
 
\t \t \t .append(
 
\t \t \t \t $("<option>See more...</option>").addClass("see-more") 
 
\t \t \t) 
 
\t \t \t .on("change", function() { 
 
\t \t \t \t var $selectedOption = $select.find("option:selected"); 
 
\t \t \t \t if ($selectedOption.hasClass("see-more")) { 
 
\t \t \t \t \t $select.val(selectedValue); 
 
\t \t \t \t \t alert("Put your fancy AJAX dialogue here"); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t selectedValue = $selectedOption.val(); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t var selectedValue = $select.find("option:selected").val(); 
 
\t }); 
 
});

.see-more{ 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Choose &laquo;See more...&raquo; for more options:</p> 
 
<select> 
 
    <optgroup label="America"> 
 
    <option value="ca">Canada</option> 
 
    <option value="us">United States</option> 
 
    </optgroup> 
 
    <optgroup label="Europe"> 
 
    <option selected value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select>

Quelle

2017-05-29 11:52:42

Auswahl nicht wählen Sie die Option, die wählen Zusammenbruch löst

Antwort

Verwandte Themen