Question

我已经分别创建了3个div，分别是第一个，第二个和第三个，并且我的页面中还有一个下拉选项。如果我们选择值，我首先要找到带黄色背景的第一个div标题。喜欢我需要根据下拉选择指出相应的div。如何实现这一点？

<form>
<select>
  <option value="First">First div</option>
  <option value="Second">Second div</option>
  <option value="Third">Third div</option>
</select>
</form>
<div id="first">
<h2>first</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="Second">
<h2>Second</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="Third">
<h2>Third</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Answer 1

您可以使用jQuery为您执行此操作。 Example

$(document).ready(function () {
    $("#dropdown").on("change", function () {
        $("div").find("h2").css("background", "none");
        $("#" + this.value).find("h2").css("background", "yellow");
    });
});

Answer 2

您可以绑定change事件处理程序以进行选择。首先选择一个id以使其更加明确。同时将第一个div的ID从first更改为First，以匹配第一个option的值。

<强> Live Demo

$('#idOfSelect').change(function(){
   divRequired = $('#' + this.value);
});

Answer 3

最好的方法是将更改处理程序绑定到select元素，然后使用选项的值选择要突出显示的元素。

$("select").on("change", function(){
    var selector = "#" + this.value;
    $("h2").removeClass("yellow");
    $(selector).find("h2").addClass("yellow");
});

我真的建议使用.addClass()而不是应用内联CSS，因为内联CSS很快会变得混乱且难以阅读。

<强> fiddle

Answer 4

您可以做的是为您的选择添加ID：

 <select id='mySelect'>
   <option value="First">First div</option>
   <option value="Second">Second div</option>
   <option value="Third">Third div</option>
 </select>

然后你可以使用这个jQuery：

$(function(){
   $('#mySelect').on('change', function(){
      $('.yellow').removeClass('yellow');  // removes the old yellow class
      $('#'+this.value).find('h2').addClass('yellow'); // adds yellow class to current divs header elem
      $('html,body').animate({ // locates the div on change of dropdown
         scrollTop : $('#'+this.value).find('h2').position().top
      });
   }).change(); //<---fires on ready
});

A working Demo

稍微更改我只是将第一个div [{1}}的ID更改为"<div id="first">"，大写为“F”。

如何根据在html页面中从下拉列表中选择一个选项来定位div

4 个答案:

A working Demo