如何重置所選的下拉列表中，當它的皮

Question

select dropdown with diffrent output dropdown value 

- 選擇一個選項 - Unifi公司的Streamyx

時選擇UNIFI它會顯示另一個下拉爲UNIFI包只

時選擇的Streamyx它會顯示另一個下拉列表僅用於streamyx包

<div class="form-group" id="beb"> 
          <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List : 
          </label> 
          <div class="col-md-6 col-sm-6 col-xs-12"> 
          <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);"> 
           <option disabled selected value> -- select an option -- </option> 
           <?php 
         $result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC"); 
           while ($row=mysqli_fetch_assoc($result)) 
            {?> 
             <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option> 
             <?php 
            } 
         ?> 
          </select> 
          </div> 
         </div> 
         <div class="form-group" id="bob"> 
          <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List : 
          </label> 
          <div class="col-md-6 col-sm-6 col-xs-12"> 
          <select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" > 
           <option disabled selected value> -- select an option -- </option> 
           <?php 
           $result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC"); 
           while($row=mysqli_fetch_assoc($result)) 
            {?> 
             <option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option> 
           <?php 
            } 
           ?> 
          </select> 
          </div> 
         </div> 

這是隱藏基於下拉的JavaScript什麼選擇

<script> var a = document.getElementById('beb'); 
    if ((value) == 'UNIFI') 
    { 
     a.style.display = ''; 
    } 
    else if((value) == 'STREAMYX') 
    { 
     a.style.display = 'none'; 
    } 



var a = document.getElementById('bob'); 
    if ((value) == 'UNIFI') 
    { 
     a.style.display = 'none'; 
    } 
    else if((value) == 'STREAMYX') 
    { 
     a.style.display = ''; 
    } 

     </script> 

Answer 1

您可以使用jQuery選擇第一項的選擇框（ - - 選擇一個選項）。 你可以用做：

$('select[name="PACKAGE_ID_UNIFI"]').prop('selectedIndex',0); 

和

$('select[name="PACKAGE_ID_STREAMYX"]').prop('selectedIndex',0); 

我添加的ID來選擇框，以便他們easyer jQuery的目標：

$(function(){ 
 
    $('#streamSelect').change(function(){ 
 
    if(this.value === 'unifi'){ 
 
     $('#unifi-contaioner').removeClass('hidden'); // show the unifi selectbox 
 
     $('#streamyx-contaioner').addClass('hidden'); // hide the streamyx selectbox 
 
     $('#streamyx').prop('selectedIndex',0);   // reset the streamyx selectbox 
 
    }else{ 
 
     $('#streamyx-contaioner').removeClass('hidden'); // show the streamyx selectbox 
 
     $('#unifi-contaioner').addClass('hidden');  // hide the unifi selectbox 
 
     $('#unifi').prop('selectedIndex',0);    // reset the unifi selectbox 
 
    } 
 
    }); 
 
})

.hidden{ 
 
    opacity: 0.2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="streamSelect"> 
 
    <option value="unifi">unifi</option> 
 
    <option value="streamyx">streamyx</option> 
 
    </select> 
 
</div> 
 

 
<div id="unifi-contaioner"> 
 
    <label for="unifi">Package List unifi:</label> 
 
    <select id="unifi" name="PACKAGE_ID_UNIFI"> 
 
    <option disabled selected value> -- select an option -- </option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    </select> 
 
</div> 
 

 
<div id="streamyx-contaioner" class="hidden"> 
 
    <label for="streamyx">Package List streamyx:</label> 
 
    <select id="streamyx" name="PACKAGE_ID_STREAMYX" > 
 
    <option disabled selected value> -- select an option -- </option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    </select> 
 
</div>

Answer 2

您可以檢測用戶選擇使用更改事件。您使用的是純粹的hs，但也標記了jQuery。我將在jQuery中給出這個例子，因爲如果你已經在頁面上同時使用了這個，你應該使用這個例子。

你的例子還有幾個問題。爲不同的元素使用單獨的變量。隱藏對我來說沒有意義。無論如何，我會以beb爲例，但我認爲你應該重新審視你的問題。

而不是改變CSS，它會更清潔，有一個選定的類在CSS中。

var $beb = $('#beb'); 
var $bob = $('#bob'); 

$beb.on('change', function (e) { 
     $beb.toggleClass('selected'); 
}); 

function