JQuery将字符串转换为链接
JQuery convert string to link
我有3个选择字段,这些字段的组合值我想用作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/现在它正在工作。当我在所有3个selectfields
中选择一个选项后,我得到一个类似/squad/redblack/1985
的输出。我想在url中使用这个输出,所以它看起来像:
mysite.com/squad/redblack/1985
有简单的方法吗?也. .只有在所有三个selectfields
都选择了一个选项后才能看到链接?
您可以使用以下命令。添加一个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>
您可以检查所选选项的数量是否与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>
要在三个选项都被选中之后才获得链接,只需使用if
语句,仅在选中三个选项时生成并显示链接。要使它成为一个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');
相关文章:
- 将纯文本URL转换为可单击链接
- 使用Javascript将链接转换为iframe
- 修复Javascript代码以将文本中的所有Youtube链接转换为Youtube ID功能
- 如何在jquery中将链接转换为seo友好的url
- 每个部分附加一次多个链接转换变量
- 如何将地址链接转换为单击时更改页面的按钮
- 如何将文本链接转换为谷歌 API 剥离的真实链接
- Acrobat JavaScript-将JavaScript页面链接转换为“;真正的链接”;
- 如何基于活动转换中断或链接转换
- 将HTML中的链接转换为锚点
- HTML将链接转换为按钮
- 将超链接转换为按钮
- 将文本链接转换为图像链接
- 将所有文本链接转换为实际链接
- 使用JavaScript将超链接转换为纯文本
- ASP.. NET MVC 3:将JavaScript链接转换为嵌入式/压缩html标记的助手
- 正在将链接转换为链接
- 如何将href中有javascript:__doPostBack的链接转换为wget/curl/lynx可以理解的普通u
- 如何阻止Chrome在复制/粘贴时将相对链接转换为绝对链接
- 将指向SVG的链接转换为内联SVG元素