如何在每个下拉菜单项的每个类别下输出链接

How do i output link under each catergory with each drop down menu item

本文关键字：链接 输出 菜单项      更新时间：2023-09-26

`

$(function(){
	$('.addLink').click(function(e){
		e.preventDefault();
		var content = $('.categorySelect');
		var url = $("#userInput").val();
		var link = "<a href='" + url + "'>" + "<br />" + url + "</a>";
		$(link).appendTo('.sports');
	});
});
	Choose Category:
        <select class='categorySelect'>
        <option value="Sports" id="a">Sports</option>
        <option value="World" id="b">World</option>
        <option value="Movies" id="c">Movies</option>
        </select><br />
       <input type='text' id='userInput' placeholder='Enter Link Here' />
       <input type='button'  value='Add' class='addLink'/>
       
	   <div class='sports'>
	   Sports:
	  </div>
	   <div class='world'><br />
	   World:
      </div>
	    <div class='movies'><br />
	   Movies:
      </div>
      </div>

`这就是我现在拥有的。当用户从下拉菜单中选择一个类别时，他们键入的链接将显示在该类别（div类）下。我好像想不通。

$('.addLink').click(function () {
    var content = $('.categorySelect').val().toLowerCase();
    var url = $("#userInput").val();
    var link = "<a href='" + url + "'>" + "<br />" + url + "</a>";
    $(link).appendTo('.'+content);
});

jsFiddle演示

首先，您不需要event.preventDefault()，因为输入字段没有需要抑制的默认操作（参见a标记，它有）。

接下来，您需要获取SELECT的值并转换为小写的，因为这是类的情况。

要附加到正确的类，请将.类指示符连接到从SELECT选项值中提取的类的名称。

如果你想在选择一个类别时自动执行操作，那么改变这个：

$('.addLink').click(function () {

到此：

$('.categorySelect').change(function () {

修订jsFiddle

请注意，我们如何使用$(this)来引用触发事件的控件。通过使用$(this)，我们可以链接jQuery方法，例如

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

如果我们想要的只是值，我们可以使用纯javascript，因为它更快：

var content = this.value;

由于.toLowerCase()是纯javascript，我们仍然可以使用this.value

var content = this.value.toLowerCase();

我为您编写了一些工作代码，其中包括对Fiddle:的评论

$(function(){
    $('.addLink').click(function(e){
        e.preventDefault();
        /* 
        Select the value of the dropdown (lowercase the values because your 
        HTML classes are written lowercase) and the values of your dropdown are not.
        */
        var content = $('.categorySelect').val().toLowerCase();
        var url = $("#userInput").val().toLowerCase();
        var link = "<a href='" + url + "'>" + "<br />" + url + "</a>";
        //Save check if the user has filled in a URL.        
        if(url !== '')
          //append URL link to the selected value of the dropdown.
          $(link).appendTo('.'+content);
    });
});

http://jsfiddle.net/9fc8zb4b/

相关文章：