时间戳

首页 > 解决方案 > Yii2：HTML 选择仅显示 1 行

javascript - Yii2：HTML 选择仅显示 1 行

问题描述

我的 Yii 项目中的 HTML 选择有问题。我有隐藏的选择选项，选择国家后，区域选择选项由当前国家显示。选择只显示 1 行，当我在选择中向下滚动时，我可以看到该国家/地区的正确选项。

有人知道问题出在哪里吗？谢谢

这是我的代码：

HTML：

<div class="form-group">
    <label class="control-label" for="region_id"><?= Yii::t('vo-card', 'Region') ?></label>
    <select class="form-control" name="region_id" id="select-region">
        <option value="" disabled selected><?= Yii::t('vo-card', 'Select') ?></option>
            <?php foreach ($region as $item) { ?>
                <option value="<?= $item->id ?>" data-country="<?= $item->id_cc_number_country ?>" hidden <?= $item->id == $request['region_id'] ? 'selected' : '' ?>><?= $item->region_name ?></option>
            <?php } ?>
    </select>
    <?php if (isset($errors['region_id'])) { ?>
        <div class="text-danger"><?= $errors['region_id'] ?></div>
    <?php } ?>
</div>

JavaScript：

$(document).on('change', '#select-country', function (event) {
    $('#select-region option:not(:disabled)').prop('hidden', true);
    $('#select-region option[data-country="' + $(this).val() + '"]').prop('hidden', false);

    $('#select-region option').prop('selected', function() {
        return this.defaultSelected;
    });

    event.preventDefault();
});

这是我的问题的屏幕

标签： javascripthtmljqueryyiiyii2

解决方案

显然问题出在这一行：

$('#select-region option[data-country="' + $(this).val() + '"]').prop('hidden', false);

注意：
$(this).val()- 这是valueselected 的属性<option>，但不是data-country属性的值。并且您需要通过-filter选择所有<option>s 。data-country

这是您的代码的更正版本：
https ://jsfiddle.net/m5ayf9sx/

推荐阅读