Question

所以我有两个下拉菜单：

<select id="list1" name="worker" class="form-control select2" style="width: 100%;">
    <option selected="selected">Choose one</option>
    <?php foreach($names as $name) { ?>
        <option value="<?php echo $name['id'] ?>"><?php echo $name['name'] ?></option>
    <?php } ?>
</select>

<select id="list2" name="vehicle" class="form-control select2" style="width: 100%;">
    <option selected="selected">Choose one</option>
    <?php foreach($cars as $car) { ?>
        <option value="<?php echo $car['id'] ?>"><?php echo $car['name'] ?></option>
    <?php } ?>
</select>

如果只有一个选项，我有这个jquery选择第一个选项：

var length1 = $('#list1> option').length;

if (length1 < 3) {
    $('select>option:eq(1)').prop('selected', true);
}

var length2 = $('#list2 > option').length;

if (length2 < 3) {
    $('select>option:eq(1)').prop('selected', true);
}

即使我只将脚本放在第二位，它也只适用于第一个。

Answer 1

请尝试使用以下代码：

var length1= $('#list1> option').length;

if(length1< 3) {
    $('select#list1>option:eq(1)').prop('selected', true);
}

var length2= $('#list2 > option').length;

if(length2 < 3) {
    $('select#list2>option:eq(1)').prop('selected', true);
}

我仍然对您在上面添加的if条件深信不疑。我将推荐以下代码

var length1= $('#list1> option').length;

if(length1 > 1) {
    $('select#list1>option:eq(1)').prop('selected', true);
}

var length2= $('#list2 > option').length;

if(length2 > 1) {
    $('select#list2>option:eq(1)').prop('selected', true);
}

在上面的代码中，我们正在检查我们是否获得了超过1 option;如果是，那么我们选择第二个选项，即Choose one选项旁边的选项。

Answer 2

首先在select tag class =“my_select”

中添加class

$(".my_select").each(function(){
    if($(this).find('option').length==2)
    {
        $(this).val($(this).find('option:eq(1)').attr('value'));
        //or you can use below
        //$(this).find('option:eq(1)').prop('selected', true);
    }
})

选择仅适用于第一个下拉列表的选项

2 个答案: