做2 <select>語句有效並且不會使腳本崩潰

Question

我將隱藏的倍數選擇放在我的代碼中，並得到了一個主體選擇，該選擇使取決於選擇的值使另一個選擇器可見，但是當您在第二個選擇中選擇一個值時，它將第二個可見選擇更改為另一個，我如何防止那要發生

它是通過html與SQL Server交互的靜態html中的目錄，因此我需要選擇將其與ID進行比較，並進行插入和更新

這是腳本：

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
function myFuction(){
  //Getting Value
        //var selValue = document.getElementById("singleSelectDD").value;
        var selObj = document.getElementById("MENU");
        var selValue = selObj.options[selObj.selectedIndex].value;
        //Setting Value
        document.getElementById("valorsel").value = selValue;
      }

</script>

這是示例：

 <select name="MENU" id="MENU" onchange="myFuction()">
        <option value="" selected></option>
        <option value="1">Area</option>
        <option value="2">Bancos</option>
        <option value="3">CFDI</option>
        <option value="4">Departamentos</option>
        <option value="5">Empresa</option>
        <option value="6">Giro Comercial</option>
        <option value="7">Negocio</option>
    </select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
  <p>Seleccione el Area deseada</p>
  <input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
  <select name="AREA" id="AREA" placeholder="Seleccione Area deseada>
    <option value="" selected></option>
    <option value="1">AREA 1</option>
    <option value="2">AREA 2</option>
    <option value="3">AREA 3</option>
</select>

我希望能夠同時在屏幕上選擇插入或更新信息

Answer 1

與其擁有$("select").change(function(){ ，不如讓您擁有$("#MENU").change(function() {更好，否則它將檢測到所有正在更改的選擇菜單，而不是只是您想要的第一個。

 $(document).ready(function() { $("#MENU").change(function() { $(this).find("option:selected").each(function() { var optionValue = $(this).attr("value"); if (optionValue) { $(".box").not("." + optionValue).hide(); $("." + optionValue).show(); } else { $(".box").hide(); } }); }).change(); }); function myFuction() { var selObj = document.getElementById("MENU"); var selValue = selObj.options[selObj.selectedIndex].value; //Setting Value //document.getElementById("valorsel").value = selValue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <select name="MENU" id="MENU" onchange="myFuction()"> <option value="" selected></option> <option value="1">Area</option> <option value="2">Bancos</option> <option value="3">CFDI</option> <option value="4">Departamentos</option> <option value="5">Empresa</option> <option value="6">Giro Comercial</option> <option value="7">Negocio</option> </select><br><br> <p>Texto Global</p> <input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global"> </div> <div class="1 box"> <p>Seleccione el Area deseada</p> <input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA"> <select name="AREA" id="AREA" placeholder="Seleccione Area deseada"> <option value=" " selected></option> <option value="1 ">AREA 1</option> <option value="2 ">AREA 2</option> <option value="3 ">AREA 3</option> </select>