将变量发送到<a href="">

Question

I have a option selector, and I want the value of the chosen option to be based on to a <a href="#top"> tag. So that <br>Godfather links to #top,<br>Shawshank to #middle<br>Fightclub to #bottom<br><br> I have the following code:

<select id="one">
    <option></option>       
    <option value="1">Godfather</option>
    <option value="2">Shawshank</option>
    <option value="3">Fightclub</option>
</select>

Javascript

var url;


    $("select").change(function () {

        //console.log($(this).val());

        var val = $(this).val();

        if (val == "1") {
            $("#image").css({"background-image": "url(image/godfather.jpg)"});
            url = "goodfather";
        }
        if (val == "2") {
            $("#image").css({"background-image": "url(image/shawshank.jpg)"});
            url = "shawshank";
        }
        if (val == "3") {
            $("#image").css({"background-image": "url(image/fightclub.jpg)"});
                            url = "fightclub";

Answer 1

    <a href="">My Link</a>
    <select id="one">
        <option></option>       
        <option value="1">Godfather</option>
        <option value="2">Shawshank</option>
        <option value="3">Fightclub</option>
    </select>

    <div id="goodfather"></div>
    <div id="shawshank"></div>
    <div id="fightclub"></div>

这里是js的变化：

var url;
$("select").change(function () {
  //console.log($(this).val());
  var val = $(this).val();
  if (val == "1") {
    $("#image").css({"background-image": "url(image/godfather.jpg)"});
    url = "goodfather";
  }
  if (val == "2") {
    $("#image").css({"background-image": "url(image/shawshank.jpg)"});
    url = "shawshank";
  }
  if (val == "3") {
    $("#image").css({"background-image": "url(image/fightclub.jpg)"});
    url = "fightclub";
  }
  $('a').attr('href', '#' + url).text(url);
});

如果您正在搜索的内容正在小提琴中正常工作：https://jsfiddle.net/v89c4tg6/

Answer 2

试试这个。 attr()方法设置或返回所选元素的属性和值。当此方法用于设置属性值时，它会为匹配元素集设置一个或多个属性/值对。

设置属性和值：

$(selector).attr(attribute,value)

请参阅.attr()

$('#movie-link').attr('href', '#' + url);

这里我们将movie-link的href设置为#url。 例如：#godfather

$('#movie-link').text(url);

这会使用movie-link重写url的文字。

var url;


$("select").change(function() {

  //console.log($(this).val());

  var val = $(this).val();

  if (val == "1") {
    $("#image").css({
      "background-image": "url('https://images-na.ssl-images-amazon.com/images/I/41fxpecg67L.jpg')"
    });
    url = "goodfather";
  }
  if (val == "2") {
    $("#image").css({
      "background-image": "url('http://68.media.tumblr.com/f60260c4de4eb3f44ed69c1b84aba752/tumblr_nyjjedR9C21s80h8lo1_1280.jpg')"
    });
    url = "shawshank";
  }
  if (val == "3") {
    $("#image").css({
      "background-image": "url('https://mir-s3-cdn-cf.behance.net/project_modules/disp/8c97ea7728123.560b0a46e7bb7.PNG')"
    });
    url = "fightclub";
  }
  $('#movie-link').attr('href', '#' + url);
  $('#movie-link').text(url);
});

#image {
  margin: 10px;
  height: 200px;
  width: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
    <option>Select option</option>       
    <option value="1">Godfather</option>
    <option value="2">Shawshank</option>
    <option value="3">Fightclub</option>
</select>
<br/>
<div id="image"></div>
<a id="movie-link" href="#">Select Link</a>