2014-10-27 62 views
-2

现在我有以下代码:如何从<option>获得的价值和使用

<form class="demo"> 
<select> 
    <option selected>Selecione sua cidade</option> 
    <option value='JP'>João Pessoa - PB</option> 
    <option value='outros'>Outros</option> 
</select> 
</form> 

我需要的:

当访问者点击下拉菜单,选择一个选项,他们去http://www.example.com 每选项将会转到不同的地址。

值= 'JP' 去example.com

值= '片尾' 去example2.com

谢谢!

编辑: 我使用这个

<script> 
$('.demo select').change(function(){ 
window.location.href="http://www.example.com"; 
}); 
</script> 
</head> 

但仍无法正常工作,以及如何使用打开不同的链接:

选择选项1 = www.example1。选择选项2 = www.example2.com

+0

(文件).ready'。 – 2014-10-27 11:46:01

+1

@jSang:*如果*代码先于页面上的元素。否则它将无论如何工作。 – 2014-10-27 11:47:24

+1

@jSang不需要,他正在执行代码'on change' – 2014-10-27 11:48:28

回答

1

拥有的网址作为选择的值,并调用一个函数的onchange:

<form class="demo"> 
<select onchange="go(this.value);"> 
    <option selected>Selecione sua cidade</option> 
    <option value='http://someurl.com'>João Pessoa - PB</option> 
    <option value='http://another.com'>Outros</option> 
</select> 
</form> 

<script> 
function go(url){ 
    window.location.href=url; 
} 
</script> 
+0

@IslenoIturiel非常好,很高兴我可以帮到你 – Steve 2014-10-27 11:49:06

+0

这是一个体面的Javascript的唯一答案。但是,如果您使用jQuery(按原文),请避免完全使用基于属性的事件作为单独的注册和处理程序代码。 – 2014-10-27 11:51:32

1

您可以使用jQuery VAL()函数来检查选中了哪个值。

form: 

<form class="demo"> 
<select> 
    <option selected>Selecione sua cidade</option> 
    <option value='http://example.a'>João Pessoa - PB</option> 
    <option value='http://example.b'>Outros</option> 
</select> 
</form> 

<script> 
$(function(){ 
    $('.demo select').change(function(){ 
    window.location.href = $(this).val(); 
    } 
}); 
</script> 
+0

是的,但它会比简单ifs更复杂:) – Robert 2014-10-27 11:47:48

+0

我以为OP因为某种原因想要保留这些值。如果不是,那么你的建议是肯定更好的选择。 – Robert 2014-10-27 11:49:27

+0

对我来说,最好的选择是史蒂夫答案,但我真的很感谢你的参与!非常感谢 – 2014-10-27 11:50:49

2

为什么不尝试这样的事情

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);"> 
<option selected>Selecione sua cidade</option> 
    <option value='www.example1.com'>João Pessoa - PB</option> 
    <option value='www.example2.com'>Outros</option> 
</select> 
+2

你应该使用一个函数,而不是倾倒整个代码内联,这将是乏味的,当OP要改变跨几页 – 2014-10-27 11:47:32

0

请尝试是这样的:如果你使用`jQuery`,你应该在`$包裹脚本

<form class="demo"> 
<select id='drop'> 
    <option selected>Selecione sua cidade</option> 
    <option value='JP'>João Pessoa - PB</option> 
    <option value='outros'>Outros</option> 
</select> 
</form> 

<script> 
$("#drop").change(function() { 
    var res = this.value; 
    if(res=='JP') 
    { 
      document.location.href = "http://example.com"; 
    } 
    else if(res == 'outros') 
    { 
     document.location.href = "http://example2.com"; 
    } 
    }); 
</script>