Question

我想选择其中一个运动，自动，Drustvo ...使用JS中的onchange功能

<form action="action_page.php">
    <select name="cars">
        <option value="sport">Sport</option>
        <option value="auto">Auto</option>
        <option value="fiat">Drustvo</option>
        <option value="audi">Tehnologija</option>
        <option value="audi">Kultura</option>
    </select>
    <br><br>
    <input type="submit">
</form>
<iframe src="http://www.naslovi.net/widget/?type=auto&bgcolor=F5F5F5&textcolor=000000&separatorcolor=D0D0D0&" frameborder="0" height="394"  width="300"></iframe>
<iframe src="http://www.naslovi.net/widget/?type=sport&bgcolor=F5F5F5&textcolor=000000&separatorcolor=D0D0D0&" frameborder="0" height="394"  width="300"></iframe>

问题是我现在才应该使用onchage功能
我应该将这些值设为iframes

Answer 1

检查此解决方案 -

<script>
function changeFrame(){

  var val = document.getElementById("type").value;
  var url = "http://www.naslovi.net/widget/?type="+val+"&bgcolor=F5F5F5&textcolor=000000&separatorcolor=D0D0D0& frameborder='0' height='394'  width='300'";
  document.getElementById("frame1").src = url;
}
</script>

<form action="action_page.php" >
  <select name="cars" id="type" onchange="changeFrame();">
    <option value="sport">Sport</option>
    <option value="auto">Auto</option>
    <option value="fiat">Drustvo</option>
    <option value="audi">Tehnologija</option>
    <option value="audi">Kultura</option>
  </select>
  <br><br>
  <input type="submit">
</form>

<iframe id="frame1" frameborder="0" height="394"  width="300"></iframe>

Answer 2

如果您希望按类型仅显示所选框架，则此类内容可能适用：

document.querySelector('[name="cars"]').onchange = function(){

     var frames = document.querySelectorAll('iframe'); // hide all frames
     for(var i=0;i<frames.length;i++) frames[i].style.display = "none";

     var frame = document.querySelector('iframe[src*="?type='+this.value+'"]');

     frame.style.display = 'block'; // display the selected one

}

用javascript连接表单

2 个答案: