下拉框特定选项切换时显示/隐藏表单的功能调整需求

Got it, let's sort out this issue! The root problem with your current code is that myFunction() only runs $('.show-form').show() no matter which dropdown option you pick. We need to add a conditional check to determine whether to show or hide the form based on the selected option.

Step 1: Update the JavaScript Function #

Modify your myFunction() to check the value of the selected dropdown option. If it's the default "none" value (matching your first option), hide the form—otherwise, show it:

/* Show/hide form based on selected venue */
function myFunction() {
  // Get the value of the selected option using `this` (refers to the dropdown itself)
  const selectedOptionValue = this.value;
  
  if (selectedOptionValue === 'none') {
    $('.show-form').hide();
  } else {
    $('.show-form').show();
  }
}

Step 2: Fix a Small HTML Issue #

Your first option has an invalid id attribute (id="#hide")—IDs can't include the # character. You can either remove this id entirely (since we're using the value to check) or rename it to something valid like id="default-venue-option":

<div class="form-group" id="venue-select">
  <select class="form-control venue-dropdown" onchange="myFunction()">
    <option value="none"><b>Select Venue Type</b></option>
    <option>Theme Restaurant</option>
    <option>Blah restaurant</option>
    <option>Flana Restaurant</option>
    <option>Woops Restaurant</option>
  </select>
</div>
<div class="row bgcolor show-form" style="display:none;">
  <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
    <form>
      <div class="form-group">
        <label><strong>Venue Name</strong><sup class = "venue-imp">*</sup></label>
        <input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
      </div>
    </form>
  </div>
  <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
    <form>
      <div class="form-group">
        <label><strong>Venue Price</strong><sup class = "venue-imp">*</sup></label>
        <input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
      </div>
    </form>
  </div>
</div>

How It Works #

• When you select any venue option (not the default), the function detects the value isn't "none" and shows the form.
• When you select "Select Venue Type" (which has value="none"), the function hides the form exactly as you want.

内容的提问来源于stack exchange，提问作者juhi