jQuery aktivieren/deaktivieren ein - /ausblenden Taste w/ WÄHLEN Sie Optionen. Holen Verbleibende option Werte

Ich habe eine select-Liste wird aufgefüllt mit den Werten, die aus einem text-Feld. Ich habe auch zwei Schaltflächen: die Schaltfläche hinzufügen fügt den eingegebenen Wert in der Liste auswählen und die Schaltfläche entfernen entfernt den angegebenen Wert aus der select-Liste. Ich würde gerne die folgenden using-jQuery:

  1. Wenn der eingegebene Wert in das text-Feld ist NICHT VERFÜGBAR in der select-Liste, zeigen Sie die Schaltfläche hinzufügen und ausblenden der Schaltfläche "entfernen".
  2. Wenn der eingegebene Wert in das text-Feld ist VERFÜGBAR in der select-Liste, blenden Sie die add-Taste und zeigen Sie auf die Schaltfläche entfernen.
  3. Wenn die select-Liste ist LEER zeigen die Schaltfläche hinzufügen und ausblenden der Schaltfläche "entfernen".

Hier ist etwas code, den ich mir ausgedacht habe:

//Remove selected options
$('#removeButton').click(function() {
   //$.map($('#addedchargeamtid :selected'), function(e) {
   $.map($('#addedchargeamtid option'), function(e) {
      var exp = $(e).text();
      //Would like to have all the Option values in CVS format 0.00,1.99, etc...
      //If removed this should also remove the value in the array
   })

   $('#removeButton').hide();
      return !$('#addedchargeamtid :selected').remove();
   });

   //Add charge amount
   $('#addedchargeamtid option:selected').focus(function() {
      $('#removeButton').show();
   });

Es zeigt die Schaltfläche "entfernen", wenn ich den ersten Wert, aber wenn ich entfernen Sie den Wert der button nicht anzeigen zurück.

UPDATE:

Okay, ich bearbeitet.

$('#removeButton').click(function() {
   $('#addedchargeamtid :selected').remove();

   $.map($('#addedchargeamtid option'), function(e) {
      var exp = $(e).text();
      alert(exp); //Need this in CSV format but I think it displays the correct values
   })

   //if($("#addedchargeamtid option").length > 0) {  <-- Didn't work                
   if($("#addedchargeamtid").length > 0) {
      $('#removeButton').show();
   } else {
      $('#removeButton').hide();
   }
});

immer noch nicht verstecken Sie die Taste, wenn kein Wert in der SELECT. Habe es versucht mit der option als gut.

was meinst du den button nicht anzeigen zurück?im letzten Satz
Von dem, was ich verstehe, Sie möchten, zeigen Sie die Taste, wenn Werte vorhanden sind und verstecken Sie die Taste, wenn Werte nicht vorhanden sind?
richtig dies ist, was ich Suche 🙂
"addedchargeamtid" der id-name der select-tag?
ja addedchargeamtid ist die id

InformationsquelleAutor Phill Pafford | 2009-05-18

  1. 2

    Ich glaube, Sie können überprüfen, um zu sehen, ob die option length >0, die sagen, dass er über die Werte und wenn nicht, dann ist es nicht vorhanden das heißt nicht Werte wie folgt:

    if($("#addedchargeamtid option").length > 0 ) //if addedchargeamtid is the id of select tag
{
   $('#removeButton').show();
}
else
{
  $('#removeButton').hide();
}
    das funktioniert: if($("#addedchargeamtid")[0].Länge > 0) {
    Ich habe es funktioniert habe ich nur noch die Klick-Aktion für die Schaltfläche hinzufügen 🙂
    habe noch eine Frage, müssen noch eine Schleife über alle die option Werte und haben Sie in der durch Kommas getrennten Wert (CSV) format. Beispiel: val1, val2, val3, etc... mit der Karte jetzt aber gibt es einen besseren Weg?

    InformationsquelleAutor TStamper

  2. 0

    Wenn verstehe ich das problem richtig, ich denke, Sie wollen dies ändern:

    //Add charge amount
$('#addedchargeamtid option:selected').focus(function() {
   $('#removeButton').show();
});

    :

    //Add charge amount
$('#addedchargeamtid option').focus(function() {
   $('#removeButton').show();
});

    so, dass die event-handler Hinzugefügt wird, alle die wählen Sie die Optionen, nicht nur die aktuell ausgewählten, wenn der code ausgeführt wird. Und auch stellen Sie sicher, dass Sie diese Prozedur für alle neu erstellten Elemente, wie gut.

    InformationsquelleAutor Matt Winckler

  3. 0

    Machte ich einen schweren Bearbeiten der ursprünglichen Frage, vorausgesetzt, mein edit ist richtig, hier eine Lösung zu deinem problem:

    XHTML:

    <input type="text" id="textField" />
<input type="button" id="addButton" value="Add" />
<input type="button" id="removeButton" value="Remove" />
<select multiple="multiple" id="selectList">
</select>

    JavaScript (meint oben genannten Dokument-Struktur):

    $(function(){

  $("#textField").keypress(function(){

    var val = $(this).val();

    if (val === '') {
      return;
    }

    //Clear selections
    $("#selectList option").removeAttr("selected");

    //Value not in select list
    if ($("#selectList option").length === 0 || $("#selectList option[value="+val+"]").length === 0) {
      $("#removeButton").hide();
      $("#addButton").show();

    //Value in select list
    } else {
      $("#removeButton").show();
      $("#addButton").hide();

      //Select it
      $("#selectList option[value="+val+"]").attr("selected", "selected");
    }
  });

  $("#removeButton").click(function(){
    var val = $("#textField").val();
    val !== '' && $("selectList option[value="+val+"]").remove();
  });

  $("#addButton").click(function(){
    var val = $("#textField").val();
    val !== '' && $("#selectList").append('<option value="'+val+'" label="'+val+'">'+val+'</option>');
  });

});

    InformationsquelleAutor Jake McGraw

  4. -1

    Für die beste Antwort, Versuchen Sie folgenden code :

    Fügen Sie Optionen, um den Tag Mit Jquery

    $(document).ready(function(){

//Function To Add or Remove New Option Field in Form
var i=2;
$(".add").on("click", function add_new(){
$(".more").append($("<p/>").append(
 "<input type='text' id='option"+i+"' placeholder='option"+i+"'/>",
 $("<img/>",{class:'add', src:'images/add.png'}).click(function(){add_new();}),
 $("<img/>",{class:'del', src:'images/del.png'}).click(function(){$(this).parent().remove();})
 ))
i=i+1;
});

//Below Function Executes on Click of create select Button
$("#button").on("click",function(){

//To Clear Previous Select Option Field if Exists in Div
$("#prm").empty();

//Creating Select Option in Div
$("#prm").append("<select></select>");

//Creating Options and Adding it To Above Select Tag
 $("input[type=text]").each(function(){
 if($(this).val()==""){
 alert($(this).attr('id')+" is Empty !");
 }
 else{
 $("select").append('<option>'+$(this).val()+'</option>');
 }
 });

});

});

    http://www.formget.com/jquery-add-option-to-select/

    InformationsquelleAutor Naveen Kolhe

Schreibe einen Kommentar