如何根据下拉选择显示条件内容？ (html+javascript)

Question

I'm struggling to show the content based on the dropdown selection in the form.我正在努力根据表单中的下拉选择显示内容。 I want text to appear in a div only if "Absolutely" is selected in a select box.仅当在 select 框中选择“绝对”时，我希望文本出现在 div 中。 Right the text shows up whether or not I select "No way" or "Absolutely".右边的文字显示我是否 select “不可能”或“绝对”。

<div class="form-group">
    <label for="seeAnotherField">Do You Want To See Another Content?</label>
    <select class="form-control" id="seeAnotherField">
          <option value="no">No Way.</option>
          <option value="yes">Absolutely!</option>
    </select>
  </div>
  
  <div class="form-group" id="otherFieldDiv">
    This text should show up if "Absolutely"
  </div>


<script type="text/javascript">
$("#seeAnotherField").change(function() {
  if ($(this).val() == "yes") {
    $('#otherFieldDiv').show();
    $('#otherField').attr('required', '');
    $('#otherField').attr('data-error', 'This field is required.');
  } else {
    $('#otherFieldDiv').hide();
    $('#otherField').removeAttr('required');
    $('#otherField').removeAttr('data-error');
  }
});
$("#seeAnotherField").trigger("change");

</script>

Answer 1

I am far from proficient with jQuery but I was able to get the show/hide working on like this.我对jQuery远非精通，但我能够像这样进行显示/隐藏。 Initially set the display of the target DIV to none so it will not appear until it is requested by the change function.最初将目标 DIV 的显示设置为无，因此在更改 function 请求之前不会出现。 The show() or hide() methods set the inline style for display which overrides whatever is defined in css. show()或hide()方法设置display的内联样式，它覆盖 css 中定义的任何内容。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <script src='//code.jquery.com/jquery-latest.js'></script>
        <title>Toggle visibility</title>
        <style>
            .reveal{display:none}
        </style>
        <script>
            $(document).on('ready',function(){
                $('select').on('change',function(e){
                    switch( $(this).val() ){
                        case 'yes':
                            $('.reveal').show();
                            $('.reveal input').each( function(i,n){
                                n.required=true;
                                n.dataset.error='This field is required.';
                            })
                        break;
                        case 'no':
                            $('.reveal').hide();
                            $('.reveal input').each( function(i,n){
                                n.removeAttribute('required');
                                n.dataset.error=false;
                            })
                        break;
                    }
                })
            });
        </script>
    </head>
    <body>
    
        <form>
        
            <div class='form-group'>
                <label>
                    Do You Want To See Another Content?
                    <select class='form-control'>
                        <option value='no'>No Way.
                        <option value='yes'>Absolutely!
                    </select>
                </label>
            </div>
            <div class='form-group reveal'>
                This text should show up if 'Absolutely' is selected!
                <input type='text' name='important_data' value='banana' />
                <input type='text' name='more_important_data' value='apple' />
                <input type='text' name='even_more_important_data' value='cherry' />
            </div>
            
        </form>
    </body>
</html>

如何根据下拉选择显示条件内容？ (html+javascript)

问题描述

1 个解决方案

解决方案1
0 2020-07-30 09:48:49

如何根据下拉选择显示条件内容？ (html+javascript)

问题描述

1 个解决方案

解决方案1 0 2020-07-30 09:48:49

解决方案1
0 2020-07-30 09:48:49