JavaScriptを使って表示/非表示にするときのドロップダウンリストやテキストボックスの内容を消去する代わりに選択したとき

選択ボックスからオプションを選択すると、ドロップダウンまたはテキストボックスのどちらかを表示します。私はどちらかのオプションを選択JavaScriptを使って表示/非表示にするときのドロップダウンリストやテキストボックスの内容を消去する代わりに選択したとき

ドロップダウンボックス：私はdiv以下Companyが表示されます選択

<div class="form-group"> 
    <label class="col-sm-4 control-label">Lessor Name</label> 
     <div class="col-sm-7"> 
     <select onchange="showDiv(this)" class="form-control" id="lessor_name" name="lessor_name" required> 
      <option value=""> -- Select -- </option> 
      <option value="Company">Company</option> 
      <option value="Vendor">Vendor</option> 
     </select> 
     </div> 
</div>

は、

<div class="form-group" name="vehiclelist" id="vehiclelist" style="display:none;"> 
    <label class="col-sm-4 control-label">Vehicle Number</label> 
    <div class="col-sm-7"> 
    <select class="form-control" id="vehicle_list" name="vehicle_list" > 
     <option value=""> -- Select -- </option> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
    </select>            
    </div> 
</div>

私が選択した場合div以下Vendorが表示されます

<div class="form-group" name="vendor_vehicle" id="vendor_vehicle" style="display:none;"> 
    <label class="col-sm-4 control-label">Vendor Vehicle Num</label> 
    <div class="col-sm-7"> 
     <input type="text" class="form-control" id="vendor_vehicle_num" name="vendor_vehicle_num" > 
    </div> 
</div>

以下は私のJですavaScript

function showDiv(select){ 
if(select.value=="Company"){ 
    document.getElementById('vehiclelist').style.display = "block"; 
} else{ 
    document.getElementById('vehiclelist').style.display = "none"; 
    document.getElementById('vehiclelist').value=""; 
} 
if(select.value=="Vendor"){ 
    document.getElementById('vendor_vehicle').style.display = "block"; 
} else{ 
    document.getElementById('vendor_vehicle').style.display = "none"; 
document.getElementById('vendor_vehicle').value=""; 
} 
}

上記のコードは動作しています。しかし、問題は最初にVendorを選択し、textboxにテキストを入力するときです。ドロップダウンリストでCompanyを選択する場合は、挿入されたテキストはvendorテキストボックスにそのまま残ります。

VendorのテキストボックスとCompanyで選択されたドロップダウンボックスのテキストをクリアするには、JavaScriptを選択する必要があります。

ありがとうございました

出典

2016-09-10 Kirataka

一方のみが任意の答えはあなたの質問を解決した場合のみ、1は – Sanka

こんにちは@Kiratakaを表示することができ、-SO選択することができます（http://meta.stackexchange.com/q/5234/179419 [それを受け入れる]をご検討ください）をクリックしてください。これは、あなたが解決策を見つけ出し、回答者とあなた自身の両方に評判を与えていることを広範なコミュニティに示します。これを行う義務はありません。 – DannyBoi

あなたが間違ったIDを参照していると思います。これを試して、それがうまくいけば教えてください。

<!DOCTYPE html> 
<html> 
<style> 
</style> 

<body> 
<div class="form-group"> 
    <label class="col-sm-4 control-label">Lessor Name</label> 
     <div class="col-sm-7"> 
     <select onchange="showDiv(this)" class="form-control" id="lessor_name" name="lessor_name" required> 
      <option value=""> -- Select -- </option> 
      <option value="Company">Company</option> 
      <option value="Vendor">Vendor</option> 
     </select> 
     </div> 
</div> 

<div class="form-group" name="vehiclelist" id="vehiclelist" style="display:none;"> 
    <label class="col-sm-4 control-label">Vehicle Number</label> 
    <div class="col-sm-7"> 
    <select class="form-control" id="vehicle_list" name="vehicle_list" > 
     <option value=""> -- Select -- </option> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
    </select>            
    </div> 
</div> 

<div class="form-group" name="vendor_vehicle" id="vendor_vehicle" style="display:none;"> 
    <label class="col-sm-4 control-label">Vendor Vehicle Num</label> 
    <div class="col-sm-7"> 
     <input type="text" class="form-control" id="vendor_vehicle_num" name="vendor_vehicle_num" > 
    </div> 
</div> 

</body> 
<script> 

function showDiv(select){ 
if(select.value=="Company"){ 
    document.getElementById('vehiclelist').style.display = "block"; 
} else{ 
    document.getElementById('vehiclelist').style.display = "none"; 

} 
if(select.value=="Vendor"){ 
    document.getElementById('vendor_vehicle').style.display = "block"; 
    document.getElementById('vendor_vehicle_num').value=""; 
} else{ 
    document.getElementById('vendor_vehicle').style.display = "none"; 
document.getElementById('vendor_vehicle').value=""; 
} 
} 
</script> 

</html>

出典

2016-09-10 05:53:20 DannyBoi

U r右ブロ。私はJSで間違ったIDを渡していました。ありがとうございました。今働いている。 – Kirataka

JavaScriptを使って表示/非表示にするときのドロップダウンリストやテキストボックスの内容を消去する代わりに選択したとき

答えて

関連する問題