如何显示不同的下拉菜单并在从下拉菜单中选择值时获取它们的值

Question

我正在使用具有 2 个值的下拉菜单。在从此下拉列表中选择值时，我在选择条件下显示 2 个下拉列表中的 1 个。我正在使用 jquery 来显示和隐藏这些下拉菜单。问题是我没有从下拉列表中获取所有值。让我通过示例来解释一下：下拉菜单中有 2 个选项：合同和例外。它适用于合同，但是当我选择异常时，它会在下拉列表（er_hidden_​​div）中显示正确的值，但是当我选择它们并使用警报时，它会显示我之前选择的合同（cc_hidden_​​div）的旧值：下面是我的代码。

<script>
$(document).ready(function() {  
$('#PrgDrpDwn_Program').change(function(){
    var value = $("#PrgDrpDwn_Program option:selected").val();
       if(value=='Contract Compliance')
       {
            alert(value);
            $('#cc_hidden_div').css('display','block');
            $('#er_hidden_div').css('display','none');  
       }
       else
        {
            alert(value);
            $('#er_hidden_div').css('display','block');
            $('#cc_hidden_div').css('display','none');
       }
    });
 });

        $('select[name="PrgDrpDwn1_Area"]').change(function(){
        var value_area= $("select[name='PrgDrpDwn1_Area'] option:selected").val();
        alert(value_area);
        });
  });
</script>

下面是我的 HTML 代码：

<div class="form-group" id="miscellaneous_program" name="miscellaneous_program" class="" style="display:none;">
        <label class="col-sm-5 control-label">Select Program New:</label>
                <select id="PrgDrpDwn_Program" name="PrgDrpDwn_Program" class="PrgDrpDwn_Program custom-dropdown__select custom-dropdown__select--emerald w348">
                    <option value="0">----Select----</option>
                    <option value="Contract Compliance">Contract Compliance</option>
                    <option value="Exception Reporting">Exception Reporting</option>
                </select>               
     </div>

<div class="form-group" id="cc_hidden_div" name="cc_hidden_div" class="cc_hidden_div" style="display:none;">
      <label class="col-sm-5 control-label">Area New</label>
            <select id="PrgDrpDwn_cc" name="PrgDrpDwn1_Area" class="custom-dropdown__select custom-dropdown__select--emerald w348">
                    <option value="-1">----Select----</option>
                    <option value="Staples">Staples</option>
                    <option value="GdfSuez">GdfSuez</option>
                    <option value="Fedex">Fedex</option>
            </select>
    </div>

<div class="form-group" id="er_hidden_div" name="er_hidden_div" class="er_hidden_div" style="display:none;">
      <label class="col-sm-5 control-label">Area New</label>
            <select id="PrgDrpDwn_er" name="PrgDrpDwn1_Area" class="custom-dropdown__select custom-dropdown__select--emerald w348">
                    <option value="-1">----Select----</option>
                    <option value="Staples">Staples</option>
                    <option value="PCard Due">PCard Due</option>
            </select>
    </div>

Answer 1

将这些与上面的代码相加，通过请求获取值并比较值如下：

   $dropdown_program=$_REQUEST["PrgDrpDwn_Program"];
   $dropdown_area_cc=$_REQUEST["PrgDrpDwn1_Area_cc"];
   $dropdown_area_er=$_REQUEST["PrgDrpDwn1_Area_er"];
   $dropdown_area_rr=$_REQUEST["PrgDrpDwn1_Area_rr"];
----------------------------------------------------------
elseif($_REQUEST["select_import"] == "Miscellaneous")
if($dropdown_area_cc=="Staples")
{}
else{}
if($dropdown_area_cc=="Gdfsuez")
{}
else{}    

Answer 2

试试下面的代码。使用 #-id 选择器

$(document).ready(function() 
        {  
            $('#PrgDrpDwn_Program').change(function()
            {
                var value = $("#PrgDrpDwn_Program option:selected").val();
                if(value=='Contract Compliance')
                {
                    alert(value);
                    $('#cc_hidden_div').css('display','block');
                    $('#er_hidden_div').css('display','none');  
                }
                else
                {
                    alert(value);
                    $('#er_hidden_div').css('display','block');
                    $('#cc_hidden_div').css('display','none');
                }
            });


            $('#PrgDrpDwn_cc').change(function()
            {
                var value_area= $("#PrgDrpDwn_cc option:selected").val();
                alert(value_area);
            });

            $('#PrgDrpDwn_er').change(function()
            {
                var value_area= $("#PrgDrpDwn_er option:selected").val();
                alert(value_area);
            });
        });