javascript - 选择表单后生成 URL

标签 javascript jquery html forms

我正在尝试在有选择表单的同一页面中生成一个网址... 但我有两个问题,我在代码下面提到了。

这是代码(和片段)

<!doctype html>
<html lang="ca">
<head>
  <meta charset="utf-8">
  <title>url generator</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<select id='corpusname' size='1' name='corpusname' required />
<option value='btdees_de'>btdees_de</option>
<option value='btdees_es'>btdees_es</option>
<option value='btenes_en'>btenes_en</option>
<option value='btenes_es'>btenes_es</option>
</select>
<p>Url: https://iac.upf.edu/cddz/infogen/pages/<var id="corpusname"></var>.html</p>
<p><a href='https://iac.upf.edu/cddz/infogen/pages/<var id="corpusname"></var>.html'>Actual link</a></p>

<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "var#corpusname" ).text( str );
  })
  .change();
</script>
</body>
</html>

问题1:“.html”之前仍然有一个空格,我无法消除。

问题 2:在纯文本中,除了问题 1 之外,URL 看起来没问题,但是当尝试在 href 属性中使用它时,它只会保留底层代码,我的意思是,它不会插入文本。

我是否做错了什么,或者这不是这样做的方法,如果是这样,哪一种可能是最好的方法?

最佳答案

不要滥用 HTML 标签,而是这样做:

<p>Url: <span id="plainUrl"></span></p>
<p><a id="actualLink">Actual link</a></p>
function updateContent() {
    var value = $(this).val();
    var link = "https://iac.upf.edu/cddz/infogen/pages/" + value + ".html";

    $("#plainUrl").text(link);              // update plain text
    $("#actualLink").attr("href", link);    // update href
}

updateContent.call($("#corpusname").change(updateContent));

https://jsfiddle.net/DerekL/9mce43jn/

关于javascript - 选择表单后生成 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47127961/

相关文章:

javascript - 在对象数组中查找下一个可用的 id

javascript - react 事件监听器, throttle 未被删除

javascript - 将 Canvas 插入 img 标签

javascript - 类切换工作但规则不生效?

javascript - 根据两个不同选项的组合显示不同的 div

Javascript 或 jQuery 表单验证仅用于精确操作

html - CSS 表格样式 - 获取表格行以填充整个内容区域

html - MaterializeCSS - 更改选择选项字体系列

javascript - 三个 JS 中的 Lithophane 效果

javascript - EventListener函数错误: CSS manipulation via vanilla Javascript