CODEWITHSUNDEEP
javascriptjquery
Wilfredo Turner
Wilfredo Turner

Reputation: 71

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

`

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

`heres what i have now. when the user chooses a catergory from the dropdown menu their typed in link will show under that caterory(div class). i cant seem to figure this out.

Upvotes: 1

Views: 67

Answers (2)

Kamuffel
Kamuffel

Reputation: 642

I have wrote some working code for you, with comments included on 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/

Upvotes: 1

cssyphus
cssyphus

Reputation: 40096

$('.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

First, you don't need event.preventDefault() because the input field doesn't have a default action that needs to be suppressed (cf. the a tag, which does).

Next, you need to grab the value of the SELECT and convert to lowercase, since that is the case of the class.

To append to the correct class, you concat the . class indicator to the name of the class extracted from the SELECT option value.

If you wanted to make the action automatic upon selection of a category, then change this:

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

to this:

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

Revised jsFiddle

Note how we can use $(this) to refer to the control that triggered the event. By using $(this), we can chain jQuery methods, e.g. 

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

If all we want is the value, we can use pure javascript as it is a bit faster:

var content = this.value;

Since .toLowerCase() is pure javascript, we can still go with this.value

var content = this.value.toLowerCase();

Upvotes: 1

Related Questions