Đi đến url khác nhau khi nhấp vào nút

Question

tôi cần tạo mã html, trong đó nếu người dùng chọn một mục từ danh sách thả xuống và nhấp vào nút thì nó sẽ chuyển đến liên kết tương ứng.

<select name="myList"> 
<option value="Google" />Google 
<option value="yahoo" />yahoo 
<option value="Ask" />Ask 
</select> 

nếu người dùng chọn Google từ danh sách thả xuống và nút nhấp chuột, sau đó trang nên được chuyển hướng đến www.google.com và nếu nó chọn yahoo và nhấp chuột vào nút nên đến www.yahoo.com

Tôi muốn đề cập đến rằng tôi cần nút trong trường hợp này. Tôi không muốn đi đến trang web tương ứng khi lựa chọn thả xuống. Chỉ sau khi nhấp vào nút.

Cảm ơn bạn trước.

Answer 1

HTML:

<select name="myList" id="ddlMyList"> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo</option> 
    <option value="http://www.ask.com">Ask</option> 
</select> 

<input type="button" value="Go To Site!" onclick="NavigateToSite()" /> 

JavaScript:

function NavigateToSite(){ 
    var ddl = document.getElementById("ddlMyList"); 
    var selectedVal = ddl.options[ddl.selectedIndex].value; 

    window.location = selectedVal; 
} 

Bạn cũng có thể mở trang web trong một cửa sổ mới bằng cách làm này:

function NavigateToSite(){ 
    var ddl = document.getElementById("ddlMyList"); 
    var selectedVal = ddl.options[ddl.selectedIndex].value; 

    window.open(selectedVal) 
} 

Như một mặt lưu ý , thẻ tùy chọn của bạn không được định dạng đúng. Bạn không bao giờ nên sử dụng phím tắt < ... /> khi thẻ chứa nội dung.

Answer 2

Thứ nhất, thay đổi các giá trị tùy chọn để URL mà bạn muốn nhắm mục tiêu:

<option value="http://www.google.com">Google</option> 
<option value="http://www.yahoo.com">Yahoo</option> 
<option value="http://www.ask.com">Ask</option> 

Tiếp theo, thêm một ID để các lựa chọn để bạn có thể nhắm mục tiêu nó:

<select name="myList" id="myList"> 

Cuối cùng, thêm một phương thức onclick vào điều khiển chọn để xử lý chuyển hướng:

<input type="button" onclick="document.location.href=document.getElementById('myList').value"> 

Answer 3

Sử dụng JavaScript, bạn có thể đính kèm onclick sự kiện vào nút. Trong trình xử lý sự kiện, bạn có thể sử dụng câu lệnh if để kiểm tra giá trị nào đã được chọn trong danh sách select và sử dụng window.location để chuyển hướng người dùng đến URL thích hợp.

Tôi khuyên bạn nên thay đổi value của các thành phần option thành URL bắt buộc và sau đó bạn có thể lấy giá trị và truy cập URL đó thay vì phải chọn tùy chọn nào được chọn.

Answer 4

<select name="myList"> 
    <option value="http://www.google.com">Google</option> 
    <option value="http://www.yahoo.com">Yahoo</option> 
    <option value="http://www.ask.com">Ask</option> 
</select> 

<input type="button" onclick="window.location=document.myList.value" /> 

Answer 5

onclick()="window.location.href='page.html'"