Question

我已经创建了一个示例下拉列表，下面是代码。

<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
 </select>
  <button>GO</button>

选择下拉项并单击“执行”按钮后，我想将页面分别重定向到https://www.amazon.in/，https://www.flipkart.com/和https://www.snapdeal.com/等各个站点。

请帮助我该怎么做

Answer 1

希望下面的代码对您有所帮助，

<select id="select-id">
  <option value="" selected="">Pick a E-commerce</option>
  <option value="http://www.amazon.com">Amazon</option>
  <option value="http://www.flipkart.com">Flipkart</option>
  <option value="http://www.snapdeal.com">Snapdeal</option>
</select>
<button onclick="siteRedirect()">GO</button>

<script>
  function siteRedirect() {
    var selectbox = document.getElementById("select-id");
    var selectedValue = selectbox.options[selectbox.selectedIndex].value;
    window.location.href = selectedValue;
  }

</script>

Answer 2

您可以尝试以下方式：

var linkArr = ["https://www.amazon.in/","https://www.flipkart.com/","https://www.snapdeal.com/"];
var selectedPosition = 0;
document.getElementById('select-id').addEventListener('change', function(){
  selectedPosition = this.selectedIndex;
});

document.getElementById('go').addEventListener('click', function(){
  if(selectedPosition != 0)
    window.location.href = linkArr[selectedPosition-1];
});

<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button type="button" id="go">GO</button>

Answer 3

<select id="selectid">
    <option j-link="" value="" selected="">Pick a E-commerce</option>
    <option j-link="http://amazon.com" value="">Amazon</option>
    <option j-link="http://flipkart.com" value="">Flipkart</option>
    <option j-link="http://snapdeal.com" value="">Snapdeal</option>
</select>

<button id="buttonid">GO</button>

<script>
    document.getElementById("buttonid").onclick = function () {
        var select = document.getElementById("selectid");
        var option = select.children[select.selectedIndex];

        if (!option || !option.getAttribute("j-link") || !option.getAttribute("j-link").length)
            return;

        window.location = option.getAttribute("j-link");
    };
</script>

Answer 4

// handle click 
$("#go").on("click", function(){
  //get selected option value
  var option =  $('#select-id').find('option:selected').attr('value');
  console.log(option)
   //redirect to that link
  var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
  var URL = option;
  var win = window.open(URL, "_blank", strWindowFeatures);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>

<button id="go">Go</button>

Answer 5

如果可以使用jquery的话：

<select id="select-id" name="select-id">
    <option value="" selected="">Pick a E-commerce</option>
    <option value="https://www.amazon.in/">Amazon</option>
    <option value="http://flipkart.com">Flipkart</option>
    <option value="http://snapdeal.com">Snapdeal</option>
</select>

<script>
$("#select-id").on("change", function(){
    location.href = this.value;
})
</script>

选择下拉选项，单击按钮即可重定向

5 个答案: