根据其他下拉列表

时间:2017-07-24 20:28:49

标签: javascript jquery html-select dropdown

我有两个下拉列表:第一个包含国家/地区的标志,第二个包含语言..我使用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>

(没关系那些“资产”,只是因为我使用框架symfony)。

当我这样做时,通过选择一个国家,语言列表中没有任何变化...... 我不知道是什么问题..但是当我尝试添加简单的选项时:我的意思是不使用旗帜语言......它可以工作..但我希望它带有标志。

请帮帮我:)。

谢谢

1 个答案:

答案 0 :(得分:0)

您的代码中有错误。在这一行

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)