表单下拉选择链接答案

【问题标题】：Form Dropdown Select Link表单下拉选择链接
【发布时间】：2015-02-25 20:47:22
【问题描述】：

我有一个选择下拉菜单，一旦用户指定了我希望它在 2 个新标签中为 2 个 URL 链接的品牌。我该怎么做，最好为提交做onclick事件，然后通过选择运行一个带有“if and else”的函数..任何建议？这是我当前的代码。

     <fieldset>

      <legend><span class="number">1</span>Select a Brand</legend>

      <label for="Brand">Brand:</label>
      <select id="brandSelect" name="brand_select">
        <optgroup label="Grills">
          <option value="http://site1.com", "http://site1A.com">DCS</option>
          <option value="http://site2.com", "http://site2A.com">Alfresco</option>
          <option value="http://site3.com", "http://site3A.com">Viking</option>
          <option value="http://site4.com", "http://site4A.com">Fire Magic</option>
          <option value="http://site5.com", "http://site5A.com">Lynx</option>
          <option value="http://site6.com", "http://site6A.com">Coyote</option>
        </optgroup>
      </select>

    </fieldset>

    <button type="submit">Sign Up</button>
    <script type="text/javascript">
       var urlmenu = document.getElementById( 'brandSelect' );
       urlmenu.onchange = function() {
            window.open( this.options[ this.selectedIndex ].value );
       };
    </script>

【问题讨论】：

如何将两个不同的 URL 作为一个选项放在选择列表中？例如它将是两个空格分隔的 URL 作为选项的值，还是什么？修改上面的问题代码/标记，使其包含您正在尝试做的示例。
好的，我在原帖中完善了我的问题。
所以value="http://site6.com", "http://site6A.com" 是非法的——必须将诸如值之类的属性设置为单引号字符串。这将是合法的：value="http://site6.com, http://site6A.com" 或只是带有空格 value="http://site6.com http://site6A.com"

标签： javascript jquery node.js forms

【解决方案1】：

假设您有两个 URL 供您选择值，例如：

<label for="Brand">Brand:</label>
<select id="brandSelect" name="brand_select">
    <optgroup label="Grills">
        <option value="http://site1.com http://site1A.com">DCS</option>
        <option value="http://site2.com http://site2A.com">Alfresco</option>
        <option value="http://site3.com http://site3A.com">Viking</option>
    </optgroup>
</select>

您可以通过拆分从value 中提取两个网址，然后为每个网址打开一个窗口/选项卡。类似的东西

<script type="text/javascript">
   var urlmenu = document.getElementById( 'brandSelect' );
   urlmenu.onchange = function() {
        var urls = this.options[ this.selectedIndex ].value.split(' ');
        urls.forEach( function(url) {
            window.open( url /*, '_blank'*/); // add a window name if desired
        });
   };
</script>

使用window.open(...) 所需的任何参数

【讨论】：

感谢您的帮助！如果我想更改它，以便当他们点击提交按钮或号召性用语时，我可以通过创建附加到函数的 onClick 事件来做到这一点吗？
@CodeWeaver ...如果这可行，如果您能接受答案，我将不胜感激（也许也可以投票！）
@CodeWeaver - 是的，您可以将“onsubmit”处理程序添加到表单或将“onclick”处理程序添加到任何内容。不要使用<div onclick="(javascript-stuff)">，更喜欢addEventListener或jQuery等框架

【解决方案2】：

 window.open( this.options[ this.selectedIndex ].value, "window_"+Math.round(Math.random()*9999) );

给每个窗口一个唯一的名称应该可以解决问题。 http://jsfiddle.net/qx2ppssn/

【讨论】：

我正在寻找浏览器同时打开 2 个具有不同 URL 的选项卡。
在一个函数中使用这段代码两次，设置不同的URL。

【解决方案3】：

尝试定义窗口名称：

此代码用于生成从 0 到 10000 的随机数

Math.round(Math.random()*10000)

连接随机数字和单词“window”，名称如“window777”，uniq 用于每次调用事件处理函数。

"window"+Math.round(Math.random()*10000)

作为每次调用的唯一名称，方法 window.open 将创建新窗口（当前情况下为选项卡）

在 window.open 调用中添加

window.open( this.options[ this.selectedIndex ].value, "window"+Math.round(Math.random()*10000));

就是这样

【讨论】：

请尝试解释你做了什么，而不是仅仅在页面上扔代码。
已添加说明
您不需要生成唯一的名称，只需使用"_blank"。后面如果需要引用窗口，保存window.open的返回值...var myWindow = window.open( url, "_blank" );