Question

需要帮助，我有这个列表，我需要在我的选择下拉选项上链接，我需要一个jQuery代码来执行此操作。

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

我需要做的是当我点击<li>Northland</li>时，会出现具有“norhtland”类的选择选项，其余选项将取决于我点击的li类。希望有人可以帮助我。非常感谢

Answer 1

试

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

注意：标签类和选项值应该相同，然后才能正常工作

UPDATED DEMO

Answer 2

你必须先尝试一下，不管怎样......

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

Working demo

编辑：根据您的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();
    });
});

此处已更新fiddle

Answer 3

尝试

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

单击li时添加值顶部选择选项

3 个答案:

UPDATED DEMO