怎么办各CATERGORY下我的输出链路，每个下拉菜单项

Question

`

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

\t 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'/> 
 
     
 
\t <div class='sports'> 
 
\t Sports: 
 
\t </div> 
 
\t <div class='world'><br /> 
 
\t World: 
 
     </div> 
 
\t  <div class='movies'><br /> 
 
\t Movies: 
 
     </div> 
 
     </div> 
 
\t

`继承人什么，我现在有。当用户从下拉菜单中选择一个catergory时，他们输入的链接将显示在该caterory（div class）下面。我似乎无法弄清楚这一点。

Answer 1

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

jsFiddle Demo

首先，你不需要event.preventDefault()因为输入字段没有需要被抑制（参见a标签，它所做的）的默认动作。

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

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

---

如果你想使动作时自动执行一个类别的选择，然后再更改本：

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

这样：

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

Revised jsFiddle

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

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

如果我们所要的是价值，我们可以使用纯JavaScript，因为它是一个有点快：

var content = this.value; 

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

去

var content = this.value.toLowerCase(); 

Answer 2

我已经为您写了一些工作代码，备注包括在小提琴上：

$(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/