Question

我正在尝试使用下拉菜单选项中的值创建一个URL。

我正在处理的页面是https://jsfiddle.net/wayneker/pqLgc2dq/13/，其想法是创建者选择不同的组件，然后选择给朋友的URL。这将打开创建者所拥有的精确构建，以便其他用户可以评估（在此使用angluarJS，所以不知道这是否会产生差异）

不可否认，我不知道如何做到这一点，并想知道是否有人可以提供帮助。如果我没有正确解释，请原谅我。我知道它可以完成，因为我已经看到其他网站这样做，但我无法理解它。想法是url填充下拉菜单。或者替代方案是一个文本框，用户可以看到扩展信息，然后使用获取代码或加载代码按钮共享它。（类似于http://www.ahoymearty.co.uk/baseplanner/，但这是使用fabricjs）

这是我创建的基本选择页面

https://jsfiddle.net/wayneker/u5L1ewxx/3/

<table>
  <tr>
  <td>
    <select>
      <option value = 1>1</option>
      <option value = 2>2</option>
      <option value = 3>3</option>
      <option value = 3>4</option>
      <option value = 3>5</option>
     </select>
  </td>
  <td>
    <select>
      <option value = 1>1</option>
      <option value = 2>2</option>
      <option value = 3>3</option>
      <option value = 3>4</option>
      <option value = 3>5</option>
    </select>
  </td>
  <td>
    <select>
      <option value = 1>1</option>
      <option value = 2>2</option>
      <option value = 3>3</option>
      <option value = 3>4</option>
      <option value = 3>5</option>
    </select>
  </td>
  <td>
    <button id="btnclick">Click me for sharable URL</button>
  </td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
</tr>

Answer 1

实际上几乎很简单：每个选择你都有一个参数。您可以使用表单包装它们，然后创建一个类似“GET请求”的URL（例如：http://www.test.com?select1=value1&select2=value2&...&selectn=valuen）

然后在调用此请求时加载您的页面并注入好的值（使用，javascript或任何你想要的）

修改

要构建获取网址，您只需检查$form.serialize()。

对于注射，您可以通过https://www.sitepoint.com/url-parameters-jquery/
激励您
关于加载页面的一个示例是（使用前面示例的函数）：

$("select").each(function () { var $select = $(this); $select.val($.urlParam($select.attr("name")); });

此代码未经过测试，但我认为没有这样的修改。

Answer 2

试试这个：

$(document).ready(function() {

  $("#btnclick").click(
    function() {
      var dropDown1 = document.getElementById("select-1").value;
      var dropDown2 = document.getElementById("select-2").value;
      var dropDown3 = document.getElementById("select-3").value;
      
      var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
      
      var url = 'https://example.com/a' + alphabet[dropDown1 - 1] + 'a' + alphabet[dropDown2 - 1] + 'a' + alphabet[dropDown3 - 1]; //Create your URL here using the dropDown1, dropDown2 and dropDown3 variables - this is just an example
      
      document.getElementById("result").innerHTML = url;
    }
  ); //end of onclick

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <td><select id="select-1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
  <td><select id="select-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
  <td><select id="select-3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></td>
  <td><button id="btnclick">Click me for sharable URL</button></td>
</table>

<div id="result"></div>

使用选项中的值创建URL

2 个答案: