我有两个下拉列表:第一个包含国家国旗,第二个包含语言..我使用 jQuery + css + html5 创建这两个列表。
现在我正在尝试这样做:我想根据我选择的国家/地区更改第二个列表(语言)的选项..
例如,当我西类牙时:英语国旗和西类牙语国旗出现在语言列表中
我用 javascript 尝试过:
<script language="javascript" type="text/javascript">
function checkValidOption() {
var field = document.getElementById('countries');
var operator = document.getElementById('operator');
field.onchange = function() {
fieldcheck();
}
fieldcheck();
function fieldcheck() {
if (field.value == 'br') {
var opt = document.createElement('option');
opt.value = 'ad';
opt.setAttribute('data-image', '{{ asset('
bundles / stageadmin / img / blank.gif ') }}');
opt.setAttribute('data-imagecss', 'flag ad');
opt.setAttribute('data-title', 'Andorra');
operator.options.add(opt);
} else if (field.value == 'au') {
..
..
}
}
..
..
}
</script>
国家列表:
<select name="countries" id="countries" style="width:300px;" onchange="checkValidOption();">
<option value='br' data-image="{{ asset('bundles/stageadmin/img/blank.gif') }}" data-imagecss="flag br" data-title="Brazil"></option>
<option value='au' data-image="{{ asset('bundles/stageadmin/img/blank.gif') }}" data-imagecss="flag au" data-title="Australia"></option>
..
..
..
</select >
这是语言列表:它首先只包含英语(出现美国国旗)
<select id="operator" name="operator" style="width:300px;">
<option value='us' data-image="{{ asset('bundles/stageadmin/img/blank.gif') }}" data-imagecss="flag us" data-title="United States"></option>
</select>
(不要介意那些“ Assets ”,这只是因为我使用框架 symfony)。
当我这样做时,通过选择一个国家/地区,语言列表中没有任何变化...... 我不知道问题是什么..但是当我尝试添加简单的选项时:我的意思是不使用标志语言...它可以工作..但我希望它与标志一起出现。
请帮助我:)
谢谢
最佳答案
您的代码有错误。在这一行
opt.setAttribute('data-image', '{{ asset('bundles / stageadmin / img / blank.gif ') }}');
您必须转义单引号或使用双引号。
opt.setAttribute('data-image', "{{ asset('bundles / stageadmin / img / blank.gif ') }}")
还可以使用operator.appendChild(opt)
代替operator.options.add(opt)
关于javascript - 根据其他下拉列表的选项在下拉列表中添加新选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45289495/