2016-10-09 126 views
2

我有這個下拉列表具有不同的值。我想要做的是每當我選擇其他選項,隱藏的ID與othertype show div,我會輸入輸入字段,並希望保存該數據,但它不工作。我不能兩次使用相同的名稱屬性我知道,但我不想爲其他輸入一個單獨的列。是否可以將輸入值保存在與選項相同的列中?我想要輸入字段的值,而不是我在其他選項中傳遞的值。將輸入字段數據保存在選擇選項值

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

腳本

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

+0

您是否使用了'選項的value'屬性比檢查,如果是「其他」其他什麼嗎?你可以使用'.text()'而不是'.val()'並且將'pType'的值存儲在你的選項的'value'中(或者你可以將它存儲爲'data-'屬性,但是...可能是壞的形式) – Tibrogargan

+0

我認爲你應該爲這個數據創建單獨的列,因爲它是不同的類型,你應該把DB信息放到用戶選擇選項「other」中。當然,您可以將這些數據放入同一個數據庫列中,但這不正確。 –

+0

我確實使用了文本(),但不知何故它不工作。是的,我有同樣的接近,但無法找到如何做到這一點的例子。 –

回答

1

看起來你要使用文本字段輸入或從下拉列表中值。您可以啓用或禁用一個字段。名稱可以是相同的,這不是問題。

<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

非常感謝Rasclatt。有效。再次感謝冠軍。 –

0

這會將所選選項的值更改爲輸入字段中的值。

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>

相關問題