javascript - 根据 html 中选择的下拉选择选项打开选项卡内容？

Question

我想通过单击选择选项来打开选项卡。以下是我的选择选项和选项卡的代码:

<select>
          <option>Select Product</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
          <option>D</option>
</select>

全部 | A | B | C | D

A、B、C、D 是产品的类别。 A、B、C 和 D 内的产品按类别排列，全部 包含所有列表。我已经使用 jquery 完成了这些选项卡功能。现在我想按照选择选项做同样的事情。

标签 HTML:

<div>
 <a href="javascript:void(0);" onclick="javascript:showProduct('', this);" class="active">All</a>
<a href="javascript:void(0);"  id='a' onclick="javascript:showProduct('a', this );" >A</a>
<a href="javascript:void(0);" id='b' onclick="javascript:showProduct('b', this);">B</a>
<a href="javascript:void(0);" id='c' onclick="javascript:showProduct('c', this);" >C</a>
<a href="javascript:void(0);" id='d' onclick="javascript:showProduct('d', this);">D</a>

我需要什么:当我选择A时，选项卡A将处于事件状态并显示内容。我怎样才能做到这一点。

请帮忙。谢谢

Answer 1

HTML:

<select id="option">
    <option selected value="1">Program 1</option>
    <option value="2">Program 2</option>
    <option value="3">Program 3</option>
    <option value="4">Program 4</option>
</select>
<div class="section" id="1">
    <h2 class="head">Program 1 :
        <h4>Using date function in javascript.</h4>
    </h2>
    <input type="button" onclick="date1()" value="Click to see the Date"/>
    <p id="dateTest"></p>
    <br/>
</div>
<div class="section" id="2">
    <h2 class="head">Program 2 :
        <h4>Changing content on "Button Click"</h4>
    </h2>
    <input type="button" onclick="changecontent()" value="Change"/>
    <p id="changecontent">
        Content before Click.
    </p>
    <br/>
</div>

JS:

//JS for menu view    
$(document).ready(function () {
  $('.section').hide();
  $('#1').show();
  $('#option').change(function (){
    $('.section').hide();
    $('#'+$(this).val()).show();
    if($(this).val()==8)
      init();
  });
});

您可以根据您的要求在DIV中放置任何内容。将其视为虚拟数据。