Question

我正在尝试根据下拉列表选择加载html页面。选择完成后，它可以正常工作。但是想要使用默认下拉列表选择加载默认页面。这是我的代码。请帮忙。

<!DOCTYPE html>
<html>
<head>
<style>
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">

function showSelected(sel) {
  locations = ["",
    "/default.asp",
    "test2.html",
    "//example.com"
  ];

  srcLocation = locations[sel.selectedIndex];
  if (srcLocation != undefined && srcLocation != "") {
    document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
      '" width="100%" height="100%" frameborder="no" scrolling="auto"></iframe>';
    //document.getElementById('content').innerHTML = "<br>Page Doesn't exists<br>";
  }
}

$(function() {
  $("select#page_selected").val("default.asp").change();
});

</script>
</head>

<body>
<select id="page_selected" onchange="showSelected(this);" onload="showSelected(this);">
  <option value="">select an option...</option>
  <option value="default.asp">Page 1</option>
  <option value="test2.html">Page 2</option>
  <option value="Page3.html">Page 3</option>
</select>
<div id="content"></div>

</body>
</html>

Answer 1

类似下面的东西应该做的工作。

<select onchange="showSelected(this);" onload="showSelected(this);">
   <option value="">select an option...</option>
   <option value="default.asp" selected="selected">Page 1</option> 
   <option value="test2.html">Page 2</option> 
   <option value="Page3.html">Page 3</option> 
</select>

Answer 2

您的选择没有page_selected ID。在default.asp

中也有一个拼写错误

如果没有select id，您的代码必须是：

$(document).ready(function() {
  $("select option").filter(function() {
    return $(this).val() == "default.asp";
  }).prop('selected', true);
  //showSelected();  
});

您还可以使用以下内容：

$(document).ready(function() {
  $("select option[value='default.asp']").prop('selected', "selected");
  //showSelected();  
});

编辑：在此之后调用showSelected（），你需要传入$（“select”）对象，但你也可以只触发更改事件：

$("select").trigger("change");

当然，您需要为选择器添加ID！

编辑：你的控制台没有出现任何错误？例如，没有定义showSelected的错误。

这是一个工作小提琴：https://jsfiddle.net/oc8xcyce/

更短：设置选择值：https://jsfiddle.net/oc8xcyce/1/

Answer 3

HTML确实具有此属性，您只需在所需选项中使用selected属性：

<select onchange="showSelected(this);">
   <option value="">select an option...</option>
   <option selected value="default.asp">Page 1</option> 
   <option value="test2.html">Page 2</option> 
   <option value="Page3.html">Page 3</option> 
</select>

使用默认下拉选择值

3 个答案: