CODEWITHSUNDEEP
javascriptjqueryhtmlcss
iori
iori

Reputation: 3506

How to style an `#id` after selecting that `#id` from my dropdown menu?

Details

enter image description here

As you can see I selected on Australia then my HTML should like this

<h5 id="Australiaia" class="country-name" >Australia</h5>

Then, my view should re-direct me to

enter image description here

Here is what I want to do , I want to put the border to Australia in the view.

JSFiddle

Upvotes: 1

Views: 120

Answers (6)

Faaiz Khan
Faaiz Khan

Reputation: 332

There are a couple of things I noticed in your code.

First you should not have the id of an element, that's very bad practice.

Secondly, it's always a good idea to use a class on an element which you want to change or manipulate via jquery or javascript. It's much easier. As I noticed you didn't put on any of the parents wrapping your h5 tag

Anyways, here's one solution

Use a css class for your borders

.border-country{border:solid red 1px;}

AND Modify your jquery code 

var lastElem=null;
$('#state').on('change',function(event){
var state= $(this).val();
    // remove already existing borders on any country lists
    $(lastElem).parent().parent().removeClass('border-country');    

    // add your own class
    $(state).parent().parent().addClass('border-country');
    // save current element in your lastElem variable and you can remove border when firing the second or so on events
    lastElem=$(state);

});

I'm using the parent() function because of the second point I mentioned in my observations, you could avoid that by putting a mock class on your parent element wrapping the h5 tag.

If you had used a class we could have simply used 

$('yourclass').removeClass('.border-country'); 
$('yourclass').addClass('.border-country');

Hope this helps and this should work!

Thx

Upvotes: 0

Waxi
Waxi

Reputation: 1651

Maybe you should learn how to post code, because including a jfiddle with every language under 'html' isn't exactly going to help anyone nor does anyone want to dig through all your lines trying to figure out what the hell you have going on, but with that said...I will tell you the basic steps of what you're going to be doing...

  1. Detect change of select, get this value.
  2. Find the h5 with that value, give it a class.
  3. Scroll to the id that is holding your country.

Upvotes: 0

Moritz Friedrich
Moritz Friedrich

Reputation: 1481

Add a target-selector to your css:

.country-name:target { font-weight: bold; color: red; }

Upvotes: 2

vbotio
vbotio

Reputation: 1674

 $('.country_name').on('click', function() {
      $(this).css('border', '1px solid red');
 }

for example.

Upvotes: -1

farjam
farjam

Reputation: 2299

You can either style your element in your CSS file: 

.country-name{color: red;}

Or, if you have to do it in jQuery, you can do something like this: 

$(document).ready(function(){
    $(".country-name").css("color", "red");
})

Upvotes: -1

Michelangelo
Michelangelo

Reputation: 5958

Well for a start you could read the jQuery documentation. And this is what your code should look like.

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

    $(this).toggleClass('yourclass');

    });

Upvotes: 1

Related Questions