danh sách thả xuống jquery, trang tải lại thay đổi bằng cách sử dụng Nhận yêu cầu có ID giá trị thả xuống

Question

Khi ai đó chọn một mục trong menu thả xuống, tôi muốn tải lại trang hiện tại bằng giá trị của ID trong mục đã chọn trong chuỗi truy vấn như:

http://www.example.com/mypage?id=234 

Tôi làm cách nào để thực hiện việc này?

Answer 1

jQuery là không cần thiết. Javascript cơ bản sẽ làm bạn tốt trong trường hợp này.

Chỉ cần thêm một "onchange" sự kiện để thả xuống bạn

<select onchange="doAction(this.value);"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
<select> 

sau đó, thêm chức năng đó được gọi là khi giá trị thay đổi

<script type="text/javascript"><!-- 
    function doAction(val){ 
     //Forward browser to new url 
     window.location='http://www.domain.com/mypage?id=' + val; 
    } 
--></script> 

HOẶC Phiên bản nhỏ gọn, không riêng biệt Mã JS

<select onchange="window.location='http://www.domain.com/mypage?id=' + this.value;"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
<select> 

Answer 2

Bạn có thể sử dụng w phiên bản javascript mà Dutchie432 lưu ý hoặc phiên bản jQuery.

<select id="the_select"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
<select> 

<script type="text/javascript"> 
$(function(){ 
    $("#the_select").change(function(){ 
    window.location='http://www.domain.com/mypage?id=' + this.value 
    }); 
}); 
</script> 

Answer 3

<select id="items" onselect="javascript:reloadPage(this)"> 
    <option name="item1">Item 1</option> 
</select> 

kịch bản:

function reloadPage(id) { 
    document.location.href = location.href + '?id=' + id.value; 
} 

Answer 4

mã sau sẽ Validate

• là URL có thông số tương ứng nếu không muốn nói rằng nó thêm.
• Nếu tham số được tìm thấy thay thế thông số bằng giá trị được chọn mới .

• Tải lại trang.

  $(function() { 
      $("#the_select").change(function() { 
  
       if (window.location.href.indexOf("?") < 0) { 
        window.location.href = window.location.href + "?mypage="+ this.value; 
       } 
       else{ 
        window.location.href = replaceUrlParam(window.location.href, "mypage", this.value) 
       } 
  
      }); 
  }); 
  
  
  function replaceUrlParam(url, paramName, paramValue) 
  { 
      var pattern = new RegExp('\\b(' + paramName + '=).*?(&|$)') 
      if (url.search(pattern) >= 0) 
      { 
       return url.replace(pattern, '$1' + paramValue + '$2'); 
      } 
      return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue 
  } 
  

Answer 5

Better là sử dụng <form> bởi vì, theo một cách khác, tất cả các lĩnh vực không nối thêm trong url. Trong nguyên nhân này, @BJ Patel muốn giải quyết vấn đề này trong câu trả lời khác ở đây.
Vì vậy, nếu bạn sử dụng form cho điều này, bất cứ lúc nào bạn sẽ có một trường khác trong biểu mẫu, sau khi gửi tất cả phụ thêm và thay thế bằng giá trị mới, trong URL. Xem:

<form method="get" action="http://www.example.com/mypage" id="form"> 
    <select id="the_select" name="id"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
    <option value="789">Go to 789</option> 
    <select> 
</form> 

<script type="text/javascript"> 
$(function(){ 
    $("#the_select").change(function(){ 
    $("#form").submit(); 
    }); 
}); 
</script>