HTML選擇菜單提交URL操作

我試圖寫這樣的選項的菜單如下：HTML選擇菜單提交URL操作

<form> 
    <select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    </select> 
<input type="submit" value="Submit"> 
</form>

我試圖做的是有每個選項代表一定URL操作，以及提交輸入將執行訪問所選選項的URL（在新選項卡，如target =「_ blank」中）的操作。

1 = http://one.example.net 
2 = http://two.example.net 
3 = http://three.example.net 
4 = http://four.example.net

我不知道是否需要將任何類型的編程設置爲提交輸入的操作。

來源

2013-04-23 questy

您將需要JavaScript來執行該操作。將URL設置爲選項的值可能很有意義。 – j08691 2013-04-23 20:48:17

這是不是可以用PHP做到這一點？我用這個結束遊戲是一個非js解決方案。 – questy 2013-04-23 21:00:02

查看我的最後一個例子 – mplungjan 2013-04-23 21:10:53

<head> 
    <script> 
    var urls = [ 
     /* [0] */ 'http://one.example.net', 
     /* [1] */ 'http://two.example.net', 
     /* [2] */ 'http://three.example.net', 
     /* [3] */'http://four.example.net' 
    ]; 
    function goToURL(s){ 
     // get selected index and subtract one to get the array's index 
     var index = parseInt(s.options[s.selectedIndex].value, 10) - 1; 

     // verify a url exists for th eoption, and if so navigate to it 
     urls[index] && window.location = urls[index]; 
    } 
    </script> 
</head>

然後加入onchange="goToURL(this);"到<select>標籤。

快速和骯髒的例子：http://jsfiddle.net/Vfamc/

來源

2013-04-23 20:52:44

或不。最好不要打擾 – mplungjan 2013-04-23 20:58:21

@mplungjan：「我不知道任何類型的編程」是否讓我開始基礎。沒有理由限制OP，我敢打賭，一個簡短而甜蜜的解決方案對他/她的使用而言是很好的。 – 2013-04-23 20:59:58

您可以用jQuery做到這一點...

$("form").submit(function() { 
    var selectVal = $('select').val(); 
    var url = ''; 
    if(selectVal == 1) url = 'http://one.example.net'; 
    else if(selectVal == 2) url = 'http://two.example.net'; 
    else if(selectVal == 3) url = 'http://three.example.net'; 
    else if(selectVal == 4) url = 'http://four.example.net'; 

    if(url != '') 
    { 
     window.open(url, '_blank'); 
    } 
});

小提琴：http://jsfiddle.net/3cWQP/

來源

2013-04-23 20:53:19 doitlikejustin

這不是優雅的，你需要防止默認不提交表單 – mplungjan 2013-04-23 20:57:27

這樣的 - 給選擇一個ID，這增加了頭。瀏覽器想有一個點擊打開新窗口

給形式的ID，並添加target="_blank"它太

- 因爲你想要一個新的標籤頁所需的HTML

var URLs = ["", 
    "http://one.example.net", 
    "http://two.example.net", 
    "http://three.example.net", 
    "http://four.example.net" 
] 
window.onload=function() { 
    document.getElementById("select1").onchange=function() { 
    var URL = URLs[this.selectedIdex]; 
    if (URL) location=URL;  
    } 
}

或者這樣沒有其他變化

window.onload=function() { 
    document.getElementById("form1").onsubmit=function() { 
    var URL = URLs[this.selectedIdex]; 
    if (URL) { 
     this.action=URL;  
     return true; 
    } 
    return false;// don't submit 
    } 
}

爲此在PHP，提交其具有靶的形式=「_空白」，並具有在服務器上的陣列和做

header("location:".$urls[$_GET["select"]]);

來源

2013-04-23 20:55:17 mplungjan

HTML選擇菜單提交URL操作

回答

相關問題