Question

我有一个包含城市部分的下拉菜单，我希望每个下拉元素都选择（突出显示）相关的div标签。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Cincinnati</title>
</head>

<body>
<div id="wrapper">cincinnati neighborhood's
  <div id="select-box">
  <select name="cincinnati_cities" id="cincinnati_cities" title="cities">
    <option value="clifton">clifton</option>
    <option value="northside">northside</option>
    <option value="mtadams">mt. adams</option>
    <option value="cincinnati">cincinnati</option>
    <option value="newport">newport</option>
  </select>
  <input name="print" type="button" id="print" title="print" value="print">
  </div>
  <div id="clifton"><p>clifton</p></div>
  <div id="northside"><p>northside</p></div>
  <div id="mtadams"><p>mtadams</p></div>
  <div id="cincinnati"><p>cincinnati</p></div>
  <div id="newport"><p>newport</p></div>
</div>
<script></script>
</body>
</html>

任何帮助都会感激不尽

Answer 1

在我看来，最好使用一个div作为写作目的......你可以尝试这样对你有帮助...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Cincinnati</title>
</head>

<body>
<script>
function a(){
    var x=document.getElementById('cincinnati_cities');
    if(x.options[x.selectedIndex].value=='clifton')
    {
        document.getElementById('northside').innerHTML='clifton';
    }
    else if(x.options[x.selectedIndex].value=='northside')
    {
        document.getElementById('northside').innerHTML='northide';
    }
    else if(x.options[x.selectedIndex].value=='mtadams')
    {
        document.getElementById('northside').innerHTML='mt.adams';
    }
    else if(x.options[x.selectedIndex].value=='cincinnati')
    {
        document.getElementById('northside').innerHTML='cincinnati';
    }
    else
    {
        document.getElementById('northside').innerHTML='newport';
    }
}
</script>
<div id="wrapper">cincinnati neighborhood's
  <div id="select-box">
  <select name="cincinnati_cities" id="cincinnati_cities" title="cities">
    <option value="clifton">clifton</option>
    <option value="northside">northside</option>
    <option value="mtadams">mt. adams</option>
    <option value="cincinnati">cincinnati</option>
    <option value="newport">newport</option>
  </select>
  <input name="print" onclick='a()' type="button" id="print" title="print" value="print">
  </div>
  <div id="northside"><p>hi</p></div>
</div>
</body>
</html>

如何使用javascript选择菜单突出显示div标签

1 个答案: