如何使用javascript函數設置href參數值

Question

我有以下表格，

<form:form method="POST" commandName="language">
        <table>
            <tr>
                <td>Language:</td>
                <td>
                    <form:select path="languageName" id="mySelect" onchange="myFunction(this.value)">
                        <form:option value="" label="...." />
                        <form:options items="${languages}" />
                    </form:select>
                </td>
                <td>
                    <form:errors path="languageName" cssStyle="color: #ff0000;" />
                </td>

            </tr>

            <tr>
                <td>
                    <a id="demo" href="/eidsar/openid-authn-request?type=ident&lang=">OpenID 2.0 Identification</a> <br>
                    <a href="/eidsar/openid-authn-request?type=auth&lang=">OpenID 2.0 Authentication</a> <br>
                    <a href="/eidsar/openid-authn-request?type=auth-ident&lang=">OpenID 2.0 Identification and Authentication</a> <br>
                </td>
            </tr>
            <tr>
        </table>
    </form:form>

我想在選擇下拉值時更改lang的值，

這是我的javascript函數，

<script>
        function myFunction(val) {
            /* var text = document.getElementById("demo").getAttribute("href")+val;
            document.getElementById("demo").href = text; */
            document.getElementById("demo").href.replace(document.getElementById("demo").getAttribute("href"), document.getElementById("demo").getAttribute("href")+val);
            alert( document.getElementById("demo").href.replace(document.getElementById("demo").getAttribute("href"), document.getElementById("demo").getAttribute("href")+val));
        }
    </script>

但是當我點擊href鏈接時，我無法在網址中發送語言值。 任何幫助，將不勝感激。 請不要將此標記為重復，因為我沒有找到相同的正確答案。

Answer 1

您需要這樣做，將結果分配回來
document.getElementById("demo").href = '...';

此外，您的函數中還存在另一個缺陷，即鏈接無法正確重置，每次選擇更改都會增加，因此這是解決原始href存儲和重用的方法之一。

function myFunction(val) {

  var elem = document.getElementById('demo');

  if (!elem.hasAttribute('data-href')) {
    elem.setAttribute('data-href', elem.href);    
  }

  elem.href = elem.getAttribute('data-href')+val));
}

我想你想要改變所有鏈接，所以這是一個使用現有標記的簡單方法

function myFunction(val) {
  var elem = document.getElementById('demo');
  var children = elem.parentNode.children;
  for (var i = 0; i < children.length; i++) {
    setHref(children[i],val);
  }
}

function setHref(elem,val) {
  if (!elem.hasAttribute('data-href')) {
    elem.setAttribute('data-href', elem.href);    
  }
  elem.href = elem.getAttribute('data-href')+val));
}

Answer 2

如果是這種情況，

 <a id="demo"...>..</a>

那么你可以通過這種方式into JavaScript function ，

var pastLink =  document.getElementById("demo").getAttribute("href");
document.getElementById("demo").href = pastLink  + "someNewLink.html";

Answer 3

try something like:


function method(val){
           //capture elements wanna change
            try{
                 var link = document.getElementById("mylink");
                //check value selection
                if(val == 'x'){
                    link.innerHTML = "facebook";,
                    link.setAttribute('href', "http://facebook.com ?lang= somevalue");
                }else if(...){
                  ....
                }
            }catch(err){
               //just to show you differents ways to capture errors
               console.log(err.message) 
               //or 
               document.getElementById("some_div_for_message").innerHTML = err.message;
            }
        return false;
        }

Answer 4

你能嘗試這樣做嗎？

var href= document.getElementById("demo").href;
 function myFunction(href, val) {
    document.getElementById("demo").href = href + val;
            /* var text = document.getElementById("demo").getAttribute("href")+val;
            document.getElementById("demo").href = text; */
            // document.getElementById("demo").href.replace(document.getElementById("demo").getAttribute("href"), document.getElementById("demo").getAttribute("href")+val);
            // alert( document.getElementById("demo").href.replace(document.getElementById("demo").getAttribute("href"), document.getElementById("demo").getAttribute("href")+val));
        }

你可以在這篇文章中看到thios問題如何使用jQuery更改超鏈接的href Expect它可以幫助你