Question

我很遗憾提起这件事，尽管有很多关于这个主题的帖子，例如： Show a second dropdown based on previous dropdown selection

虽然在尝试了这些帖子中陈述的大量内容后，我无法使其发挥作用。

问题 - 问题是3选择框#time，＃rental和#place在Select Box #course上有选择时不会显示/隐藏。

简单的代码和相关的小提琴。

再次感谢您的支持和问候干杯 MSV

<script type="text/javascript">
    $(document).ready(function (){
        $("#course").change(function() {
            $("#fishingoptions").hide();
            } if ($(this).val() === "Phase 1") {
                $("#time").hide();
                $("#rental").hide();
                $("#place").hide();
            }
            else if ($(this).val() === "Phase 2") {
                $("#time").hide();
                $("#rental").show();
                $("#place").show();
            } 
            else if ($(this).val() === "Phase 3") {
                $("#time").hide();
                $("#rental").show();
                $("#place").show();
            }
            else if ($(this).val() === "Guiding") {
                $("#time").show();
                $("#rental").show();
                $("#place").show();
            } 
            else {
                $('#time').show();
                $('#rental').show();
                $('#place').show();
            }
        });.trigger('change');
    });
</script>

<p>
        Select Course <select Name="Course" width="100%" required id="course">
        <option value="empty">-</option>
        <option value="Guiding">Guiding</option>
        <option value="Phase1">Phase 1</option>
        <option value="Phase2">Phase 2</option>
        <option value="Phase3">Phase 3</option>
        </select>
        </p>
        <div id="fishingoptions">
        <div id="time">
        <p>
        Fishing time? <select Name="Fishing Time" width="100%" required>
        <option value="empty">-</option>
        <option value="1day">Full day</option>
        <option value="1/2day">1/2 day</option>
        </select>
        </p>
        </div>
        <div id="rental">
        <p>
        Equipment rental? <select Name="Equipment Rental" width="100%" required>
        <option value="empty">-</option>
        <option value="no">no</option>
        <option value="yes">yes</option>
        </select>
        </p>
        </div>
        <div id="place">
        <p>
        Where do you want to fish? <select Name="Where to fish" width="100%" required>
        <option value="empty">-</option>
        <option value="Odeleite River" style="color:green">Odeleite River</option>
        <option value="Guadiana River" style="color:green">Guadiana River</option>
        <option value="Vascão River" style="color:green">Vascão River</option>
        <option value="Odeceixe River" style="color:green">Odeceixe River</option>
        <option value="Aljezur River" style="color:green">Aljezur River</option>
        <option value="Alvor River" style="color:green">Alvor River</option>
        <option value="Arade River" style="color:green">Arade River</option>
        <option value="Odeleite Dam" style="color:blue">Odeleite Dam</option>
        <option value="Beliche Dam" style="color:blue">Beliche Dam</option>
        <option value="Odelouca Dam" style="color:blue">Odelouca Dam</option>
        <option value="Funcho/Arade Dam" style="color:blue">Funcho/Arade Dam</option>
        <option value="Bravura Dam" style="color:blue">Bravura Dam</option>
        <option value="Santa Clara Dam" style="color:blue">Santa Clara Dam</option>
        </select>
        </p>
        </div>
        </div>

Answer 1

您的代码中存在很多错误。

$("#course").change(function() {
            $("#fishingoptions").hide();
            } if ($(this).val() === "Phase 1") {
//          ^ closes the change function prematurely.

});.trigger('change');
//^ this breaks everything.


$('#time').show();

元素具有这些类，而不是ID。

else if ($(this).val() === "Phase 3") {

这并不是指任何有意义的东西，而是使用错误的值。你想要：

else if ($(this).prop( 'value ) === "Phase3") {

$("#fishingoptions").hide();隐藏了包含元素，该元素将隐藏它包含的所有元素。

这是一个Codepen：http://codepen.io/SteveClason/pen/xOxYwa

修正的Javascript：

$(document).ready(function() {
  $("#course").change(function() {
    $("#fishingoptions").hide();
    if ($(this).prop( 'value' ) === "Phase1") {
      $(".time").hide();
      $(".rental").hide();
      $(".place").hide();
      console.log( "value: " + $( this ).prop( 'value' ));
    } else if ($(this).prop( 'value' ) === "Phase2") {
      $(".time").hide();
      $(".rental").show();
      $(".place").show();
      console.log( "value: " + $( this ).prop( 'value' ));
    } else if ($(this).prop( 'value' ) === "Phase3") {
      $(".time").hide();
      $(".rental").show();
      $(".place").show();
      console.log( "value: " + $( this ).prop( 'value' ));
    } else if ($(this).prop('value') === "Guiding") {
      $(".time").show();
      $(".rental").show();
      $(".place").show();
      console.log( "value: " + $( this ).prop( 'value' ));
    } else {
      $('.time').show();
      $('.rental').show();
      $('.place').show();
    }
    $( '#fishingoptions' ).show();
  }).trigger('change');
});

Answer 2

目前尚不清楚您实际需要什么，而且您的代码中存在一些错误。

例如，jQuery末尾的.trigger('change');不应该存在。

您使用Phase 1定位值，而在HTML中则将其设置为Phase1

我稍微改变了你的代码，你可以得到你需要的东西：

    $(document).ready(function() {
      $("#course select").on('change', function() {
        if ($(this).val() === "Phase1") {
          $("#time").hide();
          $("#rental").hide();
          $("#place").hide();
        } else if ($(this).val() === "Phase2") {
        console.log($(this).val());
          $("#time").hide();
          $("#rental").show();
          $("#place").show();
        } else if ($(this).val() === "Phase3") {
          $("#time").hide();
          $("#rental").show();
          $("#place").show();
        } else if ($(this).val() === "Guiding") {
          $("#time").show();
          $("#rental").show();
          $("#place").show();
        } else {
          $('#time').show();
          $('#rental').show();
          $('#place').show();
        }
      });
    });

完整的例子在这里：https://jsfiddle.net/retf6kwu/2/

显示基于先前下拉选择不起作用的第二个下拉列表

2 个答案: