Tạo thanh tìm kiếm đa lựa chọn (multi-choice)

herald49

New Member
#1
Mình đang cố gắng tạo một trang web HTML đơn giản với thanh tìm kiếm có thể truy vấn công cụ tìm kiếm bên ngoài theo lựa chọn của người dùng (được chọn trong menu dropdown).
Mình không thể làm cho sự lựa chọn của người dùng được chấp nhận bởi code của mình.
Mã:
<html>
<div class="custom-select" style="width:200px;">
  <select>
    <option value="http://www.google.com/search">Google</option>
    <option value="http://www.bing.com/search">Bing</option>
    <option value="https://duckduckgo.com/?q=">Duckduckgo</option>
  </select>
</div>
<div class="search-bar">
  <form method="get" action="???">
    <div style="border:1px solid black;padding:4px;width:20em;">
      <table border="0" cellpadding="0">
        <tr>
          <td>
            <input type="text" name="q" size="25" maxlength="255" value="" />
            <input type="submit" value="Search" />
          </td>
        </tr>
      </table>
    </div>
  </form>
</div>
</html>
 

Admin

Administrator
Thành viên BQT
#2
Điều này có thể được thực hiện bằng javascript bằng cách thiết lập thuộc tính action của <form>ngay trước khi yêu cầu tìm kiếm được kích hoạt.
Mã:
function UpdateFormAction() {
  var url = document.getElementById("myDropdown").value;
  document.getElementById("myForm").action = url;
}
Mã:
<html>
<div class="custom-select" style="width:200px;">
  <select id="myDropdown">
    <option value="http://www.google.com/search">Google</option>
    <option value="http://www.bing.com/search">Bing</option>
    <option value="https://duckduckgo.com/?q=">Duckduckgo</option>
  </select>
</div>
<div class="search-bar">
  <form id="myForm" target="_blank" method="get" action="???" onsubmit="UpdateFormAction()">
    <div style="border:1px solid black;padding:4px;width:20em;">
      <table border="0" cellpadding="0">
        <tr>
          <td>
            <input type="text" name="q" size="25" maxlength="255" value="" />
            <input type="submit" value="Search" />
          </td>
        </tr>
      </table>
    </div>
  </form>
</div>

</html>
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top