Question

我正在编写一个带有地图和侧面板的网站，在那里我想要采取行动，我在选择菜单中选择了一个选项。

这是我的代码：

<select id="optionList" onchange="display_div(document.getElementById('optionList').value);">
  <option selected="selected">Chose league</option>
  <option value="PL">Premier League</option>
  <option value="CH">Championship</option>
  <option value="L1">League 1</option>
  <option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
  <select id="plTeamList" onchange="display_div2(document.getElementById('plTeamList').value);">
    <option selected="selected">Chose team</option>
    <option value="MUN">Manchester United</option>
    <option value="CHE">Chelsea</option>
    <option value="BOU">Bournemouth</option>
    <option value="NEW">Newcastle</option>
  </select>
  <div id="MUN" style="display:none" onclick="clickOnMUN()"> .... </div>
</div>

我有一个脚本，当你从菜单中选择曼联时会发生什么（它正在绘制地图中的一些弹出窗口）：

 function clickOnMUN() {
   var info = whichteam("MU"); // Finner ut hvilket lag som spiller, og info om stadion
   var marker = L.marker([info.substring(0, 5), info.substring(5, 10)]).addTo(map);

   marker.bindPopup(info.substring(10));
 }

当我在团队列表中选择一个选项时，这段代码奇怪地没有执行脚本。 display_div-functions仅显示选项。

Answer 1

我看到的唯一问题是第二次“display_div”调用...它说“display_div2”可能是一个拼写错误...但是如果它与第一个相同并且只显示隐藏的div，则删除2应该解决部分问题。如果你为点击事件使用一些监听器而不是在html标签内放置函数调用，它也可以改进代码。但这可能是您当前代码的一个版本：

function display_div( theDiv ) {
	console.log ( theDiv );
	$('#'+theDiv).css("display", "block" );
}

function clickOnTeamList(targ) {

	$('#status').html("clicked a team " + targ );
}

p {
font-family: verdana;
font-size:12px;
color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="optionList" onchange="display_div(document.getElementById('optionList').value)">
  <option selected="selected">Chose league </option>
  <option value="PL">Premier League • only option active</option>
  <option value="CH">Championship</option>
  <option value="L1">League 1</option>
  <option value="L2">League 2</option>
</select>
<p></p>

<div id="PL" style="display:none;">
  <select id="plTeamList" onchange="display_div(document.getElementById('plTeamList').value);">
    <option selected="selected">Chose team</option>
    <option value="MUN">Manchester United</option>
    <option value="CHE">Chelsea</option>
    <option value="BOU">Bournemouth</option>
    <option value="NEW">Newcastle</option>
  </select>
  
  <div id = "MUN" style="display:none" onclick="clickOnTeamList(' Manchester United')" ><p>Team: Manchester United</p></div>
  <div id = "CHE" style="display:none" onclick="clickOnTeamList('Chelsea')" ><p>Team: Chelsea</p></div>
  <div id = "BOU" style="display:none" onclick="clickOnTeamList('Bournemouth')" ><p>Team: Bournemouth</p></div>
  <div id = "NEW" style="display:none" onclick="clickOnTeamList('Newcastle')" ><p>Team: Newcastle</p></div>
  
</div>

<div id="status">___</div>

单击选择菜单中的选项时的操作

1 个答案: