如何从 <option> 中获取价值并使用 [重复]答案

【问题标题】：How to get value from <option> and use [duplicate]如何从 <option> 中获取价值并使用 [重复]
【发布时间】：2014-12-22 14:04:38
【问题描述】：

现在我有以下代码：

<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 每个选项将转到不同的地址。

Value='JP' 转到 example.com

Value='outros' 转到 example2.com

谢谢！

编辑：我正在使用这个

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

但是还是不行，怎么用打开不同的链接：

选择选项 1 = www.example1.com

选择选项 2 = www.example2.com

【问题讨论】：

如果你使用jQuery，你应该将你的脚本包装在$(document).ready中。
@jSang：如果代码在页面上的元素之前。否则无论如何它都会工作。
@jSang 不需要，他正在执行代码on change
啊@TrueBlueAussie，Mr.Alien，谢谢指正。
我用的是jQuery，注意到你的提示，非常感谢！

标签： javascript jquery html

【解决方案1】：

你为什么不试试这样的东西

<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>

【讨论】：

你应该使用一个函数而不是内联转储整个代码，当 OP 想要跨多个页面进行更改时，这将是乏味的

【解决方案2】：

将url作为select中的值，并调用函数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>

【讨论】：

@IslenoIturiel 太好了，很高兴我能帮到你
这是一个不错的纯 Javascript 答案。但是，如果您使用 jQuery（根据原始版本），请避免使用完全基于属性的事件作为不必要的注册和处理程序代码的分离。

【解决方案3】：

您可以使用 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>

【讨论】：

是的，但它比简单的 ifs 更复杂 :)
我认为 OP 出于某种原因想要保留这些值。如果不是，那么您的建议肯定是更好的选择。
对我来说最好的选择是史蒂夫回答，但我非常感谢您的参与！非常感谢兄弟
+1：对于 jQuery，这是更好的答案。
我已经编辑了问题，使其使用值而不是 ifs。它与@Steve 回答类似，但在 Jquery 中：)

【解决方案4】：

请尝试以下方法：

<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>

【讨论】：