Auswahl mehrerer Optionen erstellt mehrere Eingänge

Ich habe ein Auswahlfeld in einem Formular, mit dem Sie mehrere Optionen auswählen können.Auswahl mehrerer Optionen erstellt mehrere Eingänge

Ich muss ein neues Eingabefeld für jede Anzahl von ausgewählten Optionen automatisch erstellen.

Wenn Sie beispielsweise eine Option in der Auswahlbox auswählen, wird darunter eine Eingabe angezeigt. Wenn Sie 5 auswählen, werden darunter 5 Eingänge angezeigt.

Ich bin mir nicht sicher, ob dies in nur gerade Javascript getan werden kann, oder wenn ich jQuery oder eine andere Form von AJAX verwenden muss, um dies zu tun, aber ich bin mir nicht sicher, wie ich das angehen soll (Ich bin relativ neu in der Verwendung von AJAX)

Quelle

2009-08-20 Dave Hunt

Gibt es eine feste Anzahl von Optionen, die Sie hinzufügen können? – PortageMonkey

Es ist ein dynamisches Auswahlfeld, das basierend auf dem vorherigen Auswahlfeld heh aufgefüllt wird. –

Nun, jQuery wurde nur für diese Art von Sache gemacht - ich empfehle es zu verwenden, um sich Kopfschmerzen zu ersparen.

Meine Einstellung darauf.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    $('#test') 
    .after('<div id="option-inputs"></div>') 
    .find('option').each(function() 
    { 
     var $option = $(this); 
     $option 
     .data('$input', $('<span>' + $option.text() + ': </span><input><br>').appendTo('#option-inputs').hide()) 
     .bind('toggle-input', function() 
     { 
      var $input = $option.data('$input'); 
      if ($option[0].selected) 
      { 
      $input.show(); 
      } else { 
      $input.hide(); 
      }  
     }) 
     .bind('click', function() 
     { 
      $(this).siblings().andSelf().trigger('toggle-input'); 
     }) 
     .trigger('toggle-input') 
     ; 
    }) 
    ; 
}); 


</script> 

</head> 
<body> 

<select id="test" multiple="multiple"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

</body> 
</html>

Quelle

2009-08-20 16:27:18

Ich kann nicht scheinen, dass das auch funktioniert ... Gibt es etwas, das ich vergesse? Ich habe die jQuery-Bibliothek enthalten. –

Geändert Beispiel zu voller HTML-Seite –

Okay groß, nicht sicher, was war falsch, aber ich habe es funktioniert. Ich kenne jQuery nicht, also kannst du mir mit einem letzten Tweak helfen. Ich muss in der Lage sein zu begrenzen, welche Optionen ausgewählt neue Boxen erstellen. Wenn also eine Option mit dem Wert -1 oder 0 ausgewählt wird, wird kein neues Textfeld erstellt. Alles andere tut es. Danke für Ihre Hilfe! –

Nur ein paar schnelle Gedanken .. Fügen Sie ein DIV unter dem Element auswählen.

Mithilfe von jQuery (oder JavaScript) können Sie für jedes ausgewählte Element ein Textfeld hinzufügen und dem div ein Textfeld hinzufügen. Etwas wie:

var textboxString; 
$("#SelectElement option:selected").each(function() { 
       textboxString += "<input type='textbox' /><br>" // Add to this string as needed (Labels, css class, etx). 
       }); 
$("#divElement").html(textboxString)

Quelle

2009-08-20 16:03:12 WorthiGe

Hmm, mir fällt es schwer, das zu erledigen. Gibt es noch etwas, das ich hier vergessen habe? –

Mit html wie folgt aus:

<select id="number_of_inputs"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>3</option> 
    <option>5</option> 
</select> 

<div id="inputs"></div>

Sie können diese jQuery verwenden:

$("#number_of_inputs").change(function() { 
    var num = parseInt($(this).val()); 

    $("#inputs").html(""); 
    for(var i = 0; i < num; i++) { 
    $("#inputs").append("<input type='text' /><br />"); 
    } 
});

ich tatsächlich wie gw JS besser, aber hier ist eine andere Art und Weise, es zu tun.

Quelle

2009-08-20 16:13:55

Auswahl mehrerer Optionen erstellt mehrere Eingänge

Antwort

Verwandte Themen