如何在下拉列表中传递选定的值并附加到 site_url？答案

【问题标题】：How to pass selected value in dropdown and append in site_url?如何在下拉列表中传递选定的值并附加到 site_url？
【发布时间】：2014-01-29 09:22:12
【问题描述】：

如何在下拉列表中获取所选值并将其附加到 site_url？我不知道该怎么做。请指出我正确的方向。谢谢。

<form name="filterByDate" method="post">
<h3>Filter Suggestion</h3>&nbsp;
    <select name="year">
        <option value="2013">2013</option>
        <option value="2014">2014</option></select>

    <ul>
        <li><a href="<?php echo site_url("suggestion/filter/1/". HOW TO APPEND SELECTED VALUE HERE ."); ?>">Jan</a></li>
        <li><a href="<?php echo site_url("suggestion/filter/2"); ?>">Feb</a></li>
    </ul>

</form>

我在下面编辑了接受的答案：这是编辑的部分：

 var linksContainer=document.getElementById("linksContainer");
 linksContainer.innerHTML="<li><a href=\"javascript:window.location('<?php echo site_url(); ?>/suggestion/filter/1/"+selval+"');\">January</a>

【问题讨论】：

我看到你给出的代码是服务器端代码，即用 php 编写的。如果要使用所选值更新 href 属性，则需要使用 javascript 并在客户端生成/更新超链接。有关更多信息，请参阅我的答案。
是的，我知道我需要在这里使用 javascript，但是如何将 js 放入链接中？可以使用onclick吗？
请看下面我的回答。我已经使用 js site_url(.....) 生成了链接

标签： javascript php jquery codeigniter

【解决方案1】：

尝试使用下面的代码：（略有改动）

<html>
<body>
<form name="filterByDate" method="post">
<h3>Filter Suggestion</h3>&nbsp;
    <select name="year" onchange="generateLinks(this);">
        <option value="2013">2013</option>
        <option value="2014">2014</option></select>

    <!-- <ul>
        <li><a href="<?php echo site_url("suggestion/filter/1/". HOW TO APPEND SELECTED VALUE HERE ."); ?>">Jan</a></li>
        <li><a href="<?php echo site_url("suggestion/filter/2"); ?>">Feb</a></li>
    </ul> -->

    <ul id="linksContainer">
    </ul>

</form>

<script type="text/javascript">
function generateLinks(obj){
    var selval=obj[obj.selectedIndex].value;
    var linksContainer=document.getElementById("linksContainer");
    linksContainer.innerHTML="<li><a href=\"javascript:site_url('suggestion/filter/1/"+selval+"');\">Jan</a></li>";
}
</script>
</body>
</html>

【讨论】：

每次我更改下拉列表时，它都会添加链接，但是它具有交替值，2013、2014、2013..etc..
@mmr 请尝试使用更新的代码。我删除了 linksContainer.innerHTML+= 并将其更改为 linksContainer.innerHTML=
我在上面修改了你的代码，site_url 未定义并用 window.location 替换，我知道混合 js 和 php 是一个坏主意，但我认为这是合适的实现。

【解决方案2】：

然后我将使用 jQuery，但是 id 改进了标记以具有我想要定位的标签的类/ID。给选择一个类/ID，并在脚本和UL和/或要定位的链接中使用它。

function saveUrl($item, url ) {
  $item.attr('data-url', url);
}

 // save all the links original href
 $('ul a').each(function() {
    saveUrl( $(this), $(this).attr('href') );
 });

 // on change make the links go to the actual year
 $('.select-year').on('change', function() {

    var $link = $('ul a'),
         linkDataUrl = $link.attr('data-url'),
         selectedOption = $(this).val(),
         newUrl = linkDataUrl + selectedOption;

    $link.attr('href', newUrl);

 });

【讨论】：

请检查您的代码，有错误 1. 应该选择selecetedOption 选项 2. newUrl = linkUrl + selectedOption 这将不起作用，因为要求是替换部分 href 属性，即 href="site_url( 'xyz/"+动态值+"');"您必须更新无法通过简单串联实现的动态值。

【解决方案3】：

下面将在下拉列表中为您提供选定的文本值

$("#yourdropdownid option:selected").text();

以下将给出选定的索引 $("#yourdropdownid").val()

您可以将索引或文本传递给锚点以传递url并调用onclick事件方法请参考下面的示例代码

<a href="javascript:void(0)" id="myAnchor">Jan</a>

document.getElementById('myAnchor').onclick = function() {
    // this is the <a> in here
    window.location.replace("Pass the value from Dropdown from above methods");
    return false; // optional, prevents href from executing at all 
};

【讨论】：