add Class for all options within "some selects with same parent class" using jquery?

Question

i want to use jQuery Chained in Wordpress Gravity Form. for using jquery chained, i have to manually add classes in option elements within select lists with class "city". i have 2 selects with city class and 2selects with state class.

So i need 4 same selects exactly like this:

//////////////////// Home Place Address ////////////////////

<li class="state">
<select name="state">
  <option value="">Choose your State</option>
  <option value="tehran">Tehran</option>
  <option value="semnan">Semnan</option>
  <option value="qom">Qom</option>
</select>
</li>
<li class="city">
<select name="city">
  <option value="">Choose your City</option>
  <option value="city1" class="tehran">city 1</option>
  <option value="city2" class="tehran">city 2</option>
  <option value="city3" class="tehran">city 3</option>
  <option value="city4" class="semnan">city 4</option>
  <option value="city5" class="semnan">city 5</option>
  <option value="city6" class="qom">city 6</option>
  <option value="city7" class="qom">city 7</option>
</select>
</li>

//////////////////// Work Place Address ////////////////////

<li class="state">
<select name="state">
  <option value="">Choose your State</option>
  <option value="tehran">Tehran</option>
  <option value="semnan">Semnan</option>
  <option value="qom">Qom</option>
</select>
</li>
<li class="city">
<select name="city">
  <option value="">Choose your City</option>
  <option value="city1" class="tehran">city 1</option>
  <option value="city2" class="tehran">city 2</option>
  <option value="city3" class="tehran">city 3</option>
  <option value="city4" class="semnan">city 4</option>
  <option value="city5" class="semnan">city 5</option>
  <option value="city6" class="qom">city 6</option>
  <option value="city7" class="qom">city 7</option>
</select>
</li>

for adding classes to options, i am using this jquery code:

jQuery( "li.city select > option" ).slice(1,3).addClass( "tehran" );
jQuery( "li.city select > option" ).slice(3,5).addClass( "semnan" );
jQuery( "li.city select > option" ).slice(5,7).addClass( "qom" );

it works fine but just in Home Place Address section. so it won't add classes to fourth select in above code inside Work Place Address section. i findout that i should use jquery .each(). but i can't get it working. i tried this with no success:

jQuery("li.city select > option").each(function() {
    var $this = jQuery(this);
    $this.slice(1,3).addClass( "tehran" );
    $this.slice(3,5).addClass( "semnan" );
    $this.slice(5,7).addClass( "qom" );
});

in the second couple of select you dont ve a li element so the selector cant find nothing — Vanojx1, Jul 15 '15 at 14:35

score 1 · Answer 1 · answered Jul 15 '15 at 14:41

1

I would do it like this:

var city = ["tehran","tehran","tehran","semnan","semnan","qom","qom"];
$("li.city select > option").each(function(index) {
    $(this).addClass(city[index]);
});

answered Jul 15 '15 at 14:41

Aramil Rey

3,387
1
19
30

tnx Aramil. using this mthod i have to put ~1300 names in city variable :D – Morteza Rahmani Jul 15 '15 at 15:06
Well, I was working with the info I had. You should've clarified that the amount of cities were much higher than on the example. – Aramil Rey Jul 15 '15 at 15:08

score 0 · Answer 2 · answered Jul 15 '15 at 15:07

ok i figured it out:

jQuery('li.city select').each(function(){           
jQuery(this).find('option').slice(1,3).addClass( "tehran" );
jQuery(this).find('option').slice(3,5).addClass( "semnan" );
jQuery(this).find('option').slice(5,7).addClass( "qom" );
   });

working now. thank you

add Class for all options within "some selects with same parent class" using jquery?

2 Answers2