2016-10-09 1 views
2

Ich habe diese Dropdown-Liste mit verschiedenen Werten. Was ich versuche zu tun ist, wenn ich andere Option wähle, das versteckte Div mit id = othertype show und ich werde Eingabefeld eingeben und möchte diese Daten speichern, aber es funktioniert nicht. Ich kann nicht zweimal das gleiche Namensattribut verwenden, aber ich möchte keine separate Spalte nur für andere Eingaben. Ist es möglich, den Eingabewert in derselben Spalte als Optionen zu speichern? Ich will den Wert des Eingabefeldes und nicht den Wert, den ich in anderer Option überlasse, die andere selbst ist.Nehmen Sie die Eingabefelddaten zum Speichern im ausgewählten Optionswert

<div class="form-group"> 
    <div class="col-sm-12"> 
    <label for="p_type">Type*:</label> 
    <select class="form-control" name="qp_type" id="p_type" required> 
     <option value="Css">CSS</option> 
     <option value="HTML">HTML</option> 
     <option value="PhP">PhP</option> 
     <option value="Other">Other</option> 
    </select> 
    </div> 
</div> 

<div class="form-group" id="otherType" style="display:none;"> 
    <div class="col-sm-12"> 
     <label for="pType">If you chose ‘Other’, please describe below:</label> 
     <input id="pType" type="text"> 
    </div> 
</div> 

Script

$('#p_type').on('change',function(){ 
    if($(this).val()==="Other"){ 
    $("#otherType").show() 
    } 
    else{ 
    $("#otherType").hide() 
    } 
}); 

+0

Sind Sie mit dem 'value' Attribute der Option für etwas anderes als die Überprüfung, ob es„Andere“? Sie könnten dafür '.text()' anstelle von '.val()' verwenden und den Wert von 'pType' im' Wert' Ihrer Option speichern (oder Sie können es einfach als'data-'Attribut speichern, aber ... möglicherweise schlechte Form) – Tibrogargan

+0

Ich denke, dass Sie separate Spalte für diese Daten erstellen sollten, weil es einen anderen Typ ist, und Sie sollten in DB-Informationen, dass Benutzer Option "andere" auswählen. Natürlich können Sie diese Daten in dieselbe DB-Spalte einfügen, aber IMO ist nicht korrekt. –

+0

Ich habe den Text() verwendet, aber irgendwie funktioniert es nicht. Ja, ich habe dasselbe angegangen, kann aber das Beispiel nicht finden, wie es geht. –

Antwort

1

Sieht aus wie Sie versuchen, entweder die Eingabe des Textfeldes oder den Wert aus der Dropdown-Liste zu verwenden. Sie können nur das eine Feld aktivieren oder deaktivieren. Die Namen können gleich sein, das ist kein Problem.

<div class="form-group"> 
    <div class="col-sm-12"> 
    <label for="p_type">Type*:</label> 
    <select class="form-control" name="qp_type" id="p_type" required> 
     <option value="Css" selected>CSS</option> 
     <option value="HTML">HTML</option> 
     <option value="PhP">PhP</option> 
     <option value="Other">Other</option> 
    </select> 
    </div> 
</div> 

<div class="form-group" id="otherType" style="display:none;"> 
    <div class="col-sm-12"> 
     <label for="pType">If you chose 'Other', please describe below:</label> 
     <!-- START OFF WITH THIS ONE DISABLED, NAME IT THE SAME AS ABOVE ---> 
     <input id="pType" type="text" name="qp_type" disabled> 
    </div> 
</div> 

<script> 
$(document).ready(function(){ 
    $('select[name=qp_type]').change(function(){ 
     if($(this).val() == 'Other') { 
      $('#otherType').show(); 
      $('#pType').prop('disabled',false); 
     } 
     else { 
      $('#otherType').hide(); 
      $('#pType').prop('disabled',true); 
     } 
    }); 
}); 
</script> 
+0

Vielen Dank Rasclatt. Es funktionierte.Danke Champ noch einmal. –

0

Dies ändert den Wert der ausgewählten Option auf den Wert aus dem Eingabefeld.

function init() { 
 
\t $('#p_type').on('change',function(){ 
 
\t \t if($("option:selected", this).text()==="Other"){ 
 
\t \t $("#otherType").show() 
 
\t \t } 
 
\t \t else{ 
 
\t \t $("#otherType").hide() 
 
\t \t } 
 
\t }); 
 

 
\t $('#pType').on('change',function(){ 
 
\t \t // selector should be '#p_type option[text="Other"]', but it's returning an empty array 
 
\t \t $('#p_type option:selected').val($(this).val()) 
 
\t \t console.log($('#p_type').val()); 
 
\t }); 
 
} 
 

 
$(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<body> 
 
<div class="form-group"> 
 
    <div class="col-sm-12"> 
 
    <label for="p_type">Type*:</label> 
 
    <select class="form-control" name="qp_type" id="p_type" required> 
 
     <option value="Css">CSS</option> 
 
     <option value="HTML">HTML</option> 
 
     <option value="PhP">PhP</option> 
 
     <option value="Other">Other</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="form-group" id="otherType" style="display:none;"> 
 
    <div class="col-sm-12"> 
 
     <label for="pType">If you chose ‘Other’, please describe below:</label> 
 
     <input id="pType" type="text"> 
 
    </div> 
 
</div> 
 
</body>

Verwandte Themen