如何使用onchange="函数(this.value)

how to use onchange="function(this.value)

本文关键字:函数 this value quot 何使用 onchange      更新时间:2023-09-26

我想通过一个选择字段改变文章语言,所以我给了选项不同的值,现在我不知道如何编写函数。以前我有不同的按钮,这很容易。但是现在我必须为七种语言做,而且我没有足够的空间来放置按钮。希望有人能帮助我。提前感谢。

    <select id="langbtn" name="langbtn" onchange="language(this.value)">
                <option value="">language</option>
                <option value="de">deutsch</option>
                <option value="es">español</option>
                <option value="jp">日本人</option>
                <option value="pt">português</option>
                <option Value="ru">русский</option>
                <option value="cn">中国</option>
                <option value="en">english</option>
            </select>
    function language() {
        if($(this).attr("value") == "de"){
                $.get('article_de.html', function(data) {
                    $('#article_language').html(data);
                })
                $.get('newstext_de.html', function(data) {
                    $('#newstext_language').html(data);
                })
        }
    }

你可以使用Jquery来实现相同的功能,你可以注册Select list的change事件,然后检查所选项目的值,并基于它发出get请求,如

 $(document).ready(function(){
$('#langbtn').on('change',function(){
    if($(this).val()=='')
        return;
    $.get('article_' + $(this).val() + '.html', function(data) {
        $('#article_language').html(data);
    });
    $.get('newstext_' + $(this).val() + '.html', function(data) {
        $('#newstext_language').html(data);
    });
});
});

请参考http://jsfiddle.net/4uk23djf/1/

你可以用js代码来监听变化。

$('#langbtn').on("change",function(){
     if($(this).attr("value") == "de"){
                $.get('article_de.html', function(data) {
                    $('#article_language').html(data);
                })
                $.get('newstext_de.html', function(data) {
                    $('#newstext_language').html(data);
                })
        }
});

JsFiddle

您可以使用该值作为字符串并将其连接到url中。

function language(lang) {
    if (!lang) return;
    $.get('article_' + lang + '.html', function(data) {
        $('#article_language').html(data);
    })
    $.get('newstext_' + lang + '.html', function(data) {
        $('#newstext_language').html(data);
    })
}

function language(lang) {
    if (!lang) return;
    $('#article_language').text('You have selected: ' + lang);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="langbtn" name="langbtn" onchange="language(this.value)">
                <option value="">language</option>
                <option value="de">deutsch</option>
                <option value="es">español</option>
                <option value="jp">日本人</option>
                <option value="pt">português</option>
                <option Value="ru">русский</option>
                <option value="cn">中国</option>
                <option value="en">english</option>
            </select>
<div id="article_language"></div>