JQuery 将字符串转换为 link

Question

我有 3 个 select 字段，我想将这些字段的组合值用作 url 的额外部分。

这是 HTML 代码：

<select name="cos" id="cos" size="5">
  <option value="/squad">Squad</option>
  <option value="/class">Class</option>
 </select>
<select name="color" id="color" size="5">
  <option value="/purpleblack">PurpleBlack</option>
  <option value="/redblack">RedBlack</option>
  <option value="/aquablack">AquaBlack</option>
</select>
<select name="year" id="year" size="5">
  <option value="/1984">1984</option>
  <option value="/1985">1985</option>
  <option value="/1986">1986</option>
</select>
<br/><br/>
<div id="output"></div>

和 JavaScript:

$("select").change(function () { 
   var str = "";
    $("select option:selected").each(function () {
    var id = $(this).parent().attr('name');
       str += $(this).attr('value');             
       });
      $("div#output").text(str);
    })
    .trigger('change');

https://jsfiddle.net/eZKUU/264/

现在它正在工作.. 在我 select 在所有 3 个 selectfields 中选择一个选项后，我得到了 /squad/redblack/1985 这样的输出。我想在 url 中使用此输出，因此它看起来像：

mysite.com/squad/redblack/1985

有没有简单的方法可以做到这一点？而且..只有在所有三个 selectfields 都有一个选项 selected?

之后才能看到 link

Answer 1

要在选择所有三个选项后才获得 link，只需使用 if 语句仅在选择了 3 个选项时才生成和显示 link。要使其成为 URL，只需将您获得的路径附加到基础 URL。类似于：

$("select").change(function () { 
  var str = "";
  if(#("select option:selected").length === 3){
    $("select option:selected").each(function () {
      var id = $(this).parent().attr('name');
      str += $(this).attr('value');             
    });
    $("div#output").text("mysite.com" + str);
    // Or, if you want a clickable link and not just a URL:
    // $("div#output").append($("<a>").attr({href: "mysite.com" + str}).append("Click me"));
  }
})
.trigger('change');

Answer 2

您可以使用以下内容。添加一个 a 元素并在完成之前将其隐藏。使用所选选项更新 a 元素 href 属性：

$("select").change(function() {
    var str = "";
    $("select option:selected").each(function() {
      var id = $(this).parent().attr('name');
      str += $(this).attr('value');
      //update href with selected values
      $("#mySite").attr("href", "mysite.com/" + str);
    });
    //keep anchor element hidden until all three options is selected
    $("#mySite").toggle($("#cos").find("option:selected").length > 0 && $("#color").find("option:selected").length > 0 && $("#year").find("option:selected").length > 0);
    $("div#output").text(str);
  })
  .trigger('change');

#mySite {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="cos" id="cos" size="5">
  <option value="/squad">Squad</option>
  <option value="/class">Class</option>
</select>
<select name="color" id="color" size="5">
  <option value="/purpleblack">PurpleBlack</option>
  <option value="/redblack">RedBlack</option>
  <option value="/aquablack">AquaBlack</option>
</select>
<select name="year" id="year" size="5">
  <option value="/1984">1984</option>
  <option value="/1985">1985</option>
  <option value="/1986">1986</option>
</select>
<br/>
<br/>
<div id="output"></div>
<a id="mySite" href="#">Redirect Link</a>

Answer 3

您可以检查所选选项的数量是否与 select 元素的数量相同。

var selectedAllLength = $("select").length;
$("select").change(function () {
   var str = location.origin;
    var selected = $("select option:selected");
    var selectedCount = selected.length;
    if(selectedCount == selectedAllLength) {
        selected.each(
            function () {
                str += $(this).attr('value');             
            }
        );
        $("#output").html('<a href=' + str + '>The link is here</a>');
    }
})
.trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="cos" id="cos" size="5">
  <option value="/squad">Squad</option>
  <option value="/class">Class</option>
 </select>
<select name="color" id="color" size="5">
  <option value="/purpleblack">PurpleBlack</option>
  <option value="/redblack">RedBlack</option>
  <option value="/aquablack">AquaBlack</option>
</select>
<select name="year" id="year" size="5">
  <option value="/1984">1984</option>
  <option value="/1985">1985</option>
  <option value="/1986">1986</option>
</select>
<br/><br/>
<div id="output"></div>

JQuery 将字符串转换为 link

JQuery convert string to link

javascript

string

jquery

href