JS實作下拉方塊連動步驟詳解

這次帶給大家JS實作下拉框連動步驟詳解，JS實作下拉框連動的注意事項有哪些，下面就是實戰案例，一起來看一下。

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title> JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == &#39;en&#39;){
    var sec = document.getElementById(&#39;second&#39;);
    sec.innerHTML = "<option>one<option>two";
  }else{
    var sec = document.getElementById(&#39;second&#39;);
    sec.innerHTML = "<option>一<option>二";
  }
}
</script>


<p>
  <select>
    <option>en</option>
    <option>zh</option>
  </select>
</p>
<p>
  <select>
  </select>
</p>

使用innerHTML，IE瀏覽器不支援這種方法的，所以改進方法：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta>
<title>JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == &#39;en&#39;){
    var sec = document.getElementById(&#39;second&#39;);
    sec.options[0] = new Option("one","one");
    sec.options[1] = new Option("two","two");
  }else{
    var sec = document.getElementById(&#39;second&#39;);
    sec.options[0] = new Option("一","one");
    sec.options[1] = new Option("二","two");//可设置循环配置，也可一个一个配置
  }
}
</script>


<p>
  <select>
    <option>en</option>
    <option>zh</option>
  </select>
</p>
<p>
  <select>
  </select>
</p>

可以相容火狐，IE等

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

NodeJs手機存取本地伺服器案例分析

vue中$emit 與$on父子兄弟元件操作詳解

以上是JS實作下拉方塊連動步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！