Question

我正在尝试将这些部分转到特定页面但不确定从何处开始。有人可以通过示例网页帮助我。这是我的代码：

<div style="background-color:#cde4f1;padding:10px 5px 30px 5px;width:70%;">
<p><strong>Ut varius lorem mi, non tristique felis hendrerit id.</strong></p>
<select>
<option>--Choose--</option>
<option>3 parts Medications </option>
<option>4 parts Medications </option>
<option>Medication page</option>
</select>
<button type="button">Go</button>
</div>

Answer 1

这是一个在每个data上使用jQuery和<option>属性的免费赠品。不过，在此之前，请先尝试再研究一下这个问题！

$('#go').click(function() {
  location.href = $('#menu').find('option:selected').data('url');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="background-color:#cde4f1;padding:10px 5px 30px 5px;width:70%;">
  <p><strong>Ut varius lorem mi, non tristique felis hendrerit id.</strong></p>

  <select id="menu">
    <option>--Choose--</option>
    <option data-url="http://stackoverflow.com">Stack Overflow</option>
    <option data-url="http://bing.com">Bing</option>
  </select>

  <button id="go" type="button">Go</button>

</div>

Answer 2

<script>
     function redirectUrl()
        {    var url = document.getElementById("selectUrl").value;
          if(url!="")
           {
             // window.location.replace(url); this also works
             window.location.href=url;
           }
        }
</script>

<div style="background-color:#cde4f1;padding:10px 5px 30px 5px;width:70%;">
<p><strong>Ut varius lorem mi, non tristique felis hendrerit id.</strong></p>
<select id="selectUrl" >
<option value="">--Choose--</option>
<option value="http://www.google.com">3 parts Medications </option>
<option value="http://stackoverflow.com">4 parts Medications </option>
</select>
<button type="button" onclick="redirectUrl()">Go</button>
</div>

使用选择下拉菜单转到不同的网页

2 个答案: