Question

我尝试使用stackoverflow搜索找到解决方案，但我不明白我找到了什么。

基本上我想要一个List，我可以从中选择一个值，从而改变按钮的链接。我想我需要Javascript，所以我想问你，代码看起来怎么样？

编辑：所以基本上我想选择一个选项，每个选项都有自己的链接到另一个HTML页面。如果我单击一个按钮，则会打开所选选项的html页面。如何使用Java Script进行操作？

<form action="select.html">
    <select name="BundeslÃ¤nder" size="16">
        <option selected>Baden-Würtemberg</option>
        <option>Bayern</option>
        <option>Berlin</option>
        <option>Brandenburg</option>
        <option>Bremen</option>
        <option>Hamburg</option>
        <option>Hessen</option>
        <option>Mecklenburg Vorpoomern</option>
        <option>Niedersachsen</option>
        <option>NRW</option>
        <option>Rheinland</option>
        <option>Saarland</option>
        <option>Sachsen</option>
        <option>Sachsen-Anhalt</option>
        <option>Schleswig-Holstein</option>
        <option>Thüringen</option>
    </select>
</form>

Answer 1

您可以使用此代码：

＆＃13;

<script type="text/javascript">
    function redirect(select) {
        window.location = select.options[select.selectedIndex].getAttribute('data-link');
    }
</script>

<form action="select.html">
    <select name="BundeslÃ¤nder" size="16" onChange="redirect(this)">
        <option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
        <option data-link="http://www.google.com/">Bayern</option>
        <option data-link="http://www.google.de/">Berlin</option>
        <option data-link="http://www.google.it/">Brandenburg</option>
        <option data-link="http://www.google.be/">Bremen</option>
        <option data-link="http://www.google.be/">Hamburg</option>
        <option data-link="http://www.google.be/">Hessen</option>
        <option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
        <option data-link="http://www.google.be/">Niedersachsen</option>
        <option data-link="http://www.google.be/">NRW</option>
        <option data-link="http://www.google.be/">Rheinland</option>
        <option data-link="http://www.google.be/">Saarland</option>
        <option data-link="http://www.google.be/">Sachsen</option>
        <option data-link="http://www.google.be/">Sachsen-Anhalt</option>
        <option data-link="http://www.google.be/">Schleswig-Holstein</option>
        <option data-link="http://www.google.be/">Thüringen</option>
    </select>
</form>

＆＃13;

Answer 2

检查一下。希望这是你想要的。

function selectFunction() {
    var x = document.getElementById("selectopt").value;
    document.getElementById("mylink").innerHTML = x;
  
   document.getElementById("mylink").href = "http://www." + x + ".com";
  
}

<form action="select.html">
 <select id="selectopt" onchange="selectFunction(this);" name="BundeslÃ¤nder" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>

      </select>
      </form>
   
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>

Answer 3

我认为您希望根据所选选项更改表单中的操作。使用下面的代码：

<!DOCTYPE html>
<html>
<body> 

<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
  <input type="submit">
</form>

<select id="dropwdown" name="dropwdown" onchange="chgAction();">
    <option selected>Bayern</option>
    <option>Berlin</option>
    <option>Brandenburg</option>
    <option>Bremen</option>
    <option>Hamburg</option>
    <option>Hessen</option>
    <option>Mecklenburg Vorpoomern</option>
    <option>Niedersachsen</option>
    <option>NRW</option>
    <option>Rheinland</option>
    <option>Saarland</option>
    <option>Sachsen</option>
    <option>Sachsen-Anhalt</option>
    <option>Schleswig-Holstein</option>
    <option>Thüringen</option>
</select> 

<script>
function chgAction()
{

    var selectedOption = document.getElementById("dropwdown").value;

    if(selectedOption == "Hessen" ) {
       document.getElementById('form').action = "Hessen.html";
    }
    else if(selectedOption == "NRW" ) {
       document.getElementById('form').action = "NRW.html";
    }
    //Apply the same logic for each option ...

}
</script>

</body> 
</html>

Answer 4

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {

        $('select').change(function () {
            $('#btn').attr('url_value', $(this).val());

        });

        $('#btn').click(function () {
          window.open($(this).attr('url_value'));
           // alert($(this).attr('url_value'))
        });


    });


</script>



<body>

    <form >

    <input type="button" value="Open Selected" id="btn" url_value=""/>
    <select name="Bundes" >
        <option selected>Baden-</option>
        <option>http://www.w3schools.com</option>
        <option>http://www.gmail.com</option>
        <option>Brandenburg</option>
        <option>Bremen</option>
        <option>Hamburg</option>
        <option>Hessen</option>
        <option>Mecklenburg </option>
        <option>Niedersachsen</option>
        <option>NRW</option>
        <option>test</option>
        <option>Saarland</option>
        <option>Sachsen</option>
        <option>Sachsen-</option>
        <option>Schleswig-Holstein</option>
        <option>Thüringen</option>
    </select>
</form>
 </body>
</html>

Html选择使用选择以使用Javascript更改按钮的链接

4 个答案: