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

Question

i want to change article language by a select field, so i gave the options different values, and now i can't find out how to write the function. Before i had have different buttons and it was easy. But now i have to do it for seven languages and i don't have enough space for the buttons. Hope somebody can help me. Many Thanks in advance.

    <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);
                })
        }
    }

Answer 1

you can use Jquery to achieve the same you can register change event of Select list then check values of selected item and based on it make a get request like

 $(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);
    });

});

});

please refer fiddle http://jsfiddle.net/4uk23djf/1/

Answer 2

You can use the value as a string and concatenate it into the URLs.

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> 

Answer 3

You can listen change with js code.

$('#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