add value top select option when li is click

Question

Need help with this, I have this list that I need to link on my select drop-down option, and I need a jQuery code to do this.

<ul class="north">
    <span class="label"><strong>North Island</strong></span>
    <li><a href="#" id="map1" class="northland">Northland</a></li>
    <li><a href="#" id="map2" class="aukland">Auckland</a></li>
    <li> <a href="#" id="map3" class="waikato">Waikato</a></li>
    <li><a href="#" id="map4" class="bayofplenty">Bay of Plenty</a></li>
    <li><a href="#" id="map5" class="gisborne">Gisborne & Hawkes Bay</a></li>
    <li><a href="#" id="map6" class="taranaki">Taranaki</a></li>
    <li><a href="#" id="map7" class="manawatu">Manawatu & Wanganui</a></li>
    <li><a href="#" id="map8" class="wellington">Wellington</a></li>
</ul>

<select name="select2" id="select2">
    <option value="nort">Northland Stockist</option>
    <option value="aukland">Aukland Stockist</option>
    <option value="waikato">waikato Stockist</option>
    <option value="bay of plent">Bay of Plenty Stockist</option>
    <option value="gisborne">Gisborne & Hawkes Bay Stockist</option>
    <option value="taranaki">Taranaki Stockist</option>
    <option value="manawatu">Manawatu & Wanganui Stockist</option>
    <option value="wellington">Wellington Stockist </option>
    <option value="nelson">Nelson & Marlborough Stockist</option>
    <option value="westcost">west coast Stockist</option>
    <option value="canterbuty">canterbury Stockist</option>
    <option value="otago">otago &  Sounthland Stockist</option>
</select>

What I need to do is when I click the <li>Northland</li> the select option that has class "norhtland" will appear and the rest will appear depend on the li class that I clicked. Hope someone can help me on this. Thanks so much

I can't find any classes with select options?? what do u mean? — Gibbs, Jul 30 '14 at 09:38
Stack Overflow is not a code writing service. We can help you with code that isn't working but you should at least make some attempt to solve this yourself. — Paulie_D, Jul 30 '14 at 09:41
Also, you can't use a `span` as a direct child of a `ul`. It's invalid HTML. — Paulie_D, Jul 30 '14 at 09:48
This question is essentially http://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery with an added string search, did you Google this before you asked it? — James Hunt, Jul 30 '14 at 09:49
You have try something first. Then we all will help you to solve the issue. Show some `JQuery` that you have tried. — yeshansachithak, Jul 30 '14 at 09:49

Balachandran · Answer 1 · 2014-07-30T10:23:17.777

0

try

$("ul.north li a").click(function (e) {
    e.preventDefault();
    $("#select2").val($(this).attr("class"));
});

NOTE : li a tag class and option value should be same ,then only it work

UPDATED DEMO

edited Jul 30 '14 at 10:23

answered Jul 30 '14 at 09:53

Balachandran

9,567
1
16
26

this code is working, but how can i remove the other value on select option that doesn't have the same class with li? Thanks again – labli Jul 30 '14 at 10:08
@labli in single select dropdown, only one value can be selected at a time. So, when you will make some value as selected, other value will be got unseleted automatically. – RAJ Jul 30 '14 at 10:34
@raj, what i want to do is something like this one http://fiddle.jshell.net/7m2xt/1/ , only the value of option in select box will appear depending on the li class.. sorry if i wasn't clear on that – labli Jul 30 '14 at 10:54

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

You must try something first, anyways..

$(function() {
    $('ul.north li a').click(function() {
        $('#select2').val($(this).attr('class'));
    });
});

Working demo

EDIT: As per your comment

<select name="select1" id="select1">
    <option value="north">North</option>
    <option value="south">South</option>
</select>

<select name="select2" id="select2">
    <option value="north">North 1</option>
    <option value="north">North 1</option>
    <option value="south">South 1</option>
    <option value="south">South 1</option>
</select>

$(function () {
    $('#select1').click(function () {
        $('#select2 option').hide();
        $('#select2 option[value="' + $(this).val() + '"]').prop("selected",true).show();
    });
});

Here is updated fiddle

edited May 23 '17 at 12:11

Community

1
1

answered Jul 30 '14 at 10:19

RAJ

9,697
1
33
63

Nothing new now :P, I was written the answer and pressed submit 40 min ago and just left the desk... after coming back I seen an error in submission.. I didn't have seen your ans so just submitted my answer after correction. So, it posted after yours... I think I can remove it now... because both the answers are similar – RAJ Jul 30 '14 at 10:29
You have to use like this for selecting element $('#select2 option[value="' + $(this).val() + '"]').prop("selected",true).show(); – Balachandran Jul 30 '14 at 11:24

score 0 · Accepted Answer · answered Jul 30 '14 at 10:45

Try

$("ul.north li a").click(function (e) {
e.preventDefault();
$("#select2").val($(this).attr("class"));

var options = $("#select2 option");
var activeClass = $(this).attr("class");

options.each(function(i,e){

    var t = $(this);

    if(t.val() == activeClass){

        t.show();
    }else{
         t.hide();   
    }

})

});

WORKING DEMO

add value top select option when li is click

3 Answers3

UPDATED DEMO