如何鏈接HTML <select>列表與提交按鈕

我有一個網頁，其中包含一個選擇列表與6個選項，以及一個提交按鈕。

我需要這樣編寫代碼，當在列表中選擇一個選項並單擊提交按鈕時，它應該打開另一個鏈接頁面，而當選擇另一個選項並單擊提交按鈕時，應該打開另一個選項頁。

基本上我希望每個選項在點擊提交按鈕時打開一些鏈接的頁面。

通過googling了一下，我明白我必須使用PHP，但我沒有得到適當的代碼。

我不希望提交按鈕只能打開1個特定頁面。相反，我希望它打開對應於所選不同選項的6個不同頁面。如何鏈接HTML <select>列表與提交按鈕

代碼段：

<div> 

    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1> 

    <select> 

    <option value=""></option> 
    <option value="physics">physics</option> 
    <option value="chemistry">chemistry</option> 
    <option value="biology">biology</option> 
    <option value="maths">maths</option> 
    <option value="cs">cs</option> 
    <option value="electrical">electrical</option> 

     </select> 
     <br> 

    <input class="SubmitButton" type="submit" name="SUBMITBUTTON"    value="Submit" style="font-size:20px; " /> 
    </div>

而且據我瞭解，它不能因爲不能直接打開頁面，則需要一個選項列表中的提交按鈕執行一個動作使用href標記來完成。

需要幫助來解決這個問題。

來源

2016-06-28 Neha Shetty

你應該把它們放在一個表單中。 – Ajay

是的，我想鏈接的頁面在下一個窗口中打開。 –

根據收到的回覆將您的表單重新導向到相應的頁面 – zakhefron

我想希望根據選定的值打開多個窗口。所以這裏是例子：

<div> 
    <H1>SELECT An subject:</H1> 
    <form id="link"> 
     <select multiple="multiple"> 
      <option value="">Choose links</option> 
      <option value="http://stackoverflow.com/">Stackoverflow</option> 
      <option value="http://google.com/">Google</option> 
      <option value="http://yahoo.com/">Yahoo</option> 
      <option value="http://bing.com/">Bing</option> 
      <option value="http://php.net/">PHP official</option> 
      <option value="http://w3c.org">W3C</option> 
     </select> 
     <br> 
     <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/> 
    </form> 
</div> 
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script> 
<script> 
    $('#link').on('submit', function (e) { 
     e.preventDefault(); 
     var $form = $(this), 
       $select = $form.find('select'), 
       links = $select.val(); 
     if (links.length > 0) { 
      for (i in links) { 
       link = links[i]; 
       window.open(link); 
      } 
     } 
    }); 
</script>

首先，你必須設置多個屬性來選擇。然後通過jQuery，你可以在新的彈出窗口中打開每個鏈接。小心瀏覽器可能會阻止這些彈出窗口。

UPDATE 如果你想打開只是一個窗口，你可以用@阿南特的解決方案

來源

2016-06-28 06:22:30 AlmasK89

這兩個代碼的工作！ tysm！ :) –

不客氣 – AlmasK89

你可以用PHP做到這一點，但你需要做兩件事情：

把選擇和輸入到表格中你的HTML，像這樣：

<form action="" method="post"> 
    <select name="opt"> 
    <option value="1">Link 1</option> 
    <option value="2">Link 2</option> 
    <!-- etc --> 
    </select> 
    <input type="submit" name="submit">Submit</input> 
</form>

讓PHP捕獲表單的POST數據並重定向到相應的頁面，如下所示:(將此表格放在PHP頁面的頂部）

<?php 
if (isset($_POST['submit'])) 
{ 
    if (isset($_POST['opt'])) 
    { 
     if ($_POST['opt'] == '1') { header('Location: page1.php'); } 
     elseif ($_POST['opt'] == '2') { header('Location: page2.php'); } 
     // etc... 
    } 
} 

?>

只有在調用標頭前沒有HTML輸出時，標題重定向才能正常工作，因此請確保PHP代碼塊之前沒有HTML代碼。

來源

2016-06-28 05:51:02

以這種方式進入下一頁後，他的選擇頁面將消失。她想要的是在不影響選擇頁面的情況下在新窗口中打開新頁面。 –

簡單的解決方案基於jquery： -

<div> 

    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1> 

    <select id ="dropDownId"> <!-- give an id to select box--> 

     <option value="">Select Option</option> 
     <option value="physics">physics</option> 
     <option value="chemistry">chemistry</option> 
     <option value="biology">biology</option> 
     <option value="maths">maths</option> 
     <option value="cs">cs</option> 
     <option value="electrical">electrical</option> 

    </select> 
    <br> 
    <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " /> 
</div> 
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library--> 
<script type = "text/javascript"> 
$('.SubmitButton').click(function(){ // on submit button click 

    var urldata = $('#dropDownId :selected').val(); // get the selected option value 
    window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish. 
}); 

</script>

注： - 此代碼將做以下的事情： -

1.Select框頁面刷新永遠。

2.根據選定的值您的URL'S在新窗口中打開。

3.您也可以根據您的要求更改URL格式。我只舉了一個示例。

來源

2016-06-28 05:57:08

簡單和完美的答案... –

@HarshSanghani謝謝。:) –

謝謝你這麼多的幫助！ :) @Anant –

在HTML代碼中

function showPage() { 
    var sel = document.getElementById('subjects'); 

    var option = sel.options[sel.selectedIndex].value; 

    window.open(option + ".html"); 
}

添加這個腳本，並複製下面的HTML代碼，並與你的替代

<select id="subjects"> 

    <option value=""></option> 
    <option value="physics">physics</option> 
    <option value="chemistry">chemistry</option> 
    <option value="biology">biology</option> 
    <option value="maths">maths</option> 
    <option value="cs">cs</option> 
    <option value="electrical">electrical</option> 

</select> 

<input class="SubmitButton" type="button" value="Submit" onclick="showPage()" style="font-size:20px; " />

希望這有助於:)

來源

2016-06-28 06:05:59

<script type="text/javascript"> 
function configureDropDownLists(ddl1,ddl2) { 
var goa = ['GOA ASF', 'Goa LPG Plant', ]; 
var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT','WADALA I TERMINAL']; 
var rajasthan = ['AJMER LPG PLANT ','AJMER TERMINAL','UDAIPUR RRO']; 
var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL','VADODARA IRD ']; 
var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO']; 

switch (ddl1.value) { 
    case 'Goa': 
     ddl2.options.length = 0; 
     for (i = 0; i < goa.length; i++) { 
      createOption(ddl2, goa[i], goa[i]); 
     } 
     break; 
    case 'Maharashtra': 
     ddl2.options.length = 0; 
    for (i = 0; i < maharashtra.length; i++) { 
     createOption(ddl2, maharashtra[i], maharashtra[i]); 
     } 
     break; 
    case 'Rajasthan': 
     ddl2.options.length = 0; 
     for (i = 0; i < rajasthan.length; i++) { 
      createOption(ddl2, rajasthan[i], rajasthan[i]); 
     } 
     break; 
    case 'Gujrat': 
     ddl2.options.length = 0; 
     for (i = 0; i < gujrat.length; i++) { 
      createOption(ddl2, gujrat[i], gujrat[i]); 
     } 
     break; 
    case 'MadhyaPradesh': 
     ddl2.options.length = 0; 
     for (i = 0; i < madhyapradesh.length; i++) { 
      createOption(ddl2, madhyapradesh[i], madhyapradesh[i]); 
     } 
     break; 
     default: 
      ddl2.options.length = 0; 
     break; 
}

}

function createOption(ddl, text, value) { 
    var opt = document.createElement('option'); 
    opt.value = value; 
    opt.text = text; 
    ddl.options.add(opt); 
} 
</script> 
</HEAD> 

<BODY> 

<br> 
<div> 
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1> 

    <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))"> 
<option value=""></option> 
<option value="Goa">Goa</option> 
<option value="Maharashtra">Maharashtra</option> 
<option value="Rajasthan">Rajasthan</option> 
<option value="Gujrat">Gujrat</option> 
<option value="MadhyaPradesh">MadhyaPradesh</option> 
</select> 

<select id="ddl2"> 
</select><br> 
<br> 
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " /> 
</div>

喜！另外我有一個依賴下拉列表。其中第一個列表包含5個狀態，第二個列表包含該位置內的城市。我已經使用上面顯示的腳本來鏈接兩個下拉列表。我可以用第二個依賴下拉列表以同樣的方式鏈接提交按鈕嗎？如果是，我應該使用什麼代碼，因爲第二個列表不在選擇標記其上面的腳本中：

來源

2016-06-28 07:17:24

@ALmask請告訴我，如果你可以幫我這個也 –

@Anant這是一個問題。 –

是的，我只是想問我該如何應用代碼在您的答案這個下拉列表 –

如何鏈接HTML <select>列表與提交按鈕

回答

相關問題