Javascript下拉选择的值是另一个网页

Question

我有这段代码。我现在拥有的选项(PrecipRate、Temperature等)所有这些都有相应的.html文件。如果我单击某个参数，我希望.html文件就在下拉菜单的旁边。因为我尝试使用href标签，所以它会打开一个新窗口。到目前为止，我所能做的就是根据js中设置的条件显示文本。

This is the html part:

<div class="col-md-3">
 <h1>Weather Maps (PyQGIS)</h1>
  <span id="jsclock1"></span><br><br>
     <h3>Products:</h3>
     <select id="select">
      <option selected disabled>Select a Forecast Parameter</option>
         <option value="render-1">Precipitation Rate</option>
         <option value="render-2">Temperature</option>
         <option value="render-3">Wind</option>
      </select>
</div>

<div class="col-md-9">
 <h3>Weather Maps Visualizations</h3>
  <div class="content-area">
    <!--THE .HTML FILES OF EACH PARAMETER IS SUPPOSED TO BE DISPLAYED HERE-->       
  </div>
</div

This is the js part:
$("#select").on('change', function() {
let jThis = $(this);
let selectVal = jThis.val();

if(selectVal == "render-1") {
$(".content-area").html("1st");
} else if(selectVal == "render-2") {
$(".content-area").html("2nd");
} else if(selectVal == "render-3") {
$(".content-area").html("3rd");
} else {
$(".content-area").html("No filters");
}

This is a snippet of code in one of the parameters in the option tag. The Precipitation Rate(prate.html)

<!--PRATE VIS STARTS HERE-->

    <div class="col-md-3" style="display: inline;">
      <h2>Precipitation Rate</h2>
    </div>

    <div class="col-md-9" style="display: inline;">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="flanis" height="680" width="850">
        <param name="movie" value="./flanislocal.swf">
        <param name="quality" value="high">
        <param name="menu" value="false">
        <param name="FlashVars" value="configFilename=flanist1.cfg">

        <embed src="./flanislocal.swf" name="flanis" swliveconnect="false" quality="high" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noscale" flashvars="configFilename=flanist1.cfg" height="800" width="850">

      </object>
    </div>

Answer 1

将代码示例plunker加载(选项1& 2)右侧的文件，并让链接(选项3)在新窗口中打开，您可以如下所示：

$("#select").on('change', function() {
      let jThis = $(this);
      let selectVal = jThis.val();

      if(selectVal == "render-1") {
        $(".content-area").load("prate.html"); // file path load right side
      } else if(selectVal == "render-2") {
        $(".content-area").load("file2.html"); // file path load right side
      } else if(selectVal == "render-3") {
        //added anchor to dispaly the link to open the file
        $(".content-area").html('<a href="file2.html" target="_blank">' + selectVal + '</a>'); 
      } else {
        $(".content-area").html("No filters");
      }
  });