Как я могу изменить эффект этих кнопок для выбора, чтобы я мог удалить кнопки?

Question

Я хочу использовать кнопку выбора вместо кнопок для перевода этой страницы, кнопки, которые я хочу удалить. кнопка работает отлично, единственная проблема в том, что их там не должно быть, вместо этого должен быть только выбор.

var arrLang = {
  'en': {
    'home': 'Home',
    'about': 'About Us',
    'contact': 'Contact Us',
    'desc': 'This is my description'
  },
  'km': {
    'home': 'ទំព័រដើម',
    'about': 'អំពីយើង',
    'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
    'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
  }
};

// Process translation
$(function() {
  $('.translate').click(function() {
    var lang = $(this).attr('id');

    $('.lang').each(function(index, item) {
      $(this).text(arrLang[lang][$(this).attr('id')]);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="en" class="translate">English</button>
<button id="km" class="translate">ខ្មែរ</button>
<select id="language" class="translate" style="">
  <option value="en">English</option>
  <option value="km">ខ្មែរ</option>
</select>

<ul>
  <li class="lang" id="home">Home</li>
  <li class="lang" id="about">About Us</li>
  <li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>

<br>

Answer 1

В своей функции вы используете идентификатор кнопок для выбора языка. Если вы хотите изменить это поле выбора, вы можете использовать вместо этого значение параметров выбора. Вот два способа сравнения:

var arrLang = {
  'en': {
    'home': 'Home',
    'about': 'About Us',
    'contact': 'Contact Us',
    'desc': 'This is my description'
  },
  'km': {
    'home': 'ទំព័រដើម',
    'about': 'អំពីយើង',
    'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
    'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
  }
};

// Process translation
$(function() {
  $('button.translate').click(function() {
    var lang = $(this).attr('id');

    $('.lang').each(function(index, item) {
      $(this).text(arrLang[lang][$(this).attr('id')]);
    });
  });
});
$(function() {
  $('select.translate').on('change', function () {
     var lang = $(this).val();
     
     $('.lang').each(function(index, item) {
        $(this).text(arrLang[lang][$(this).attr('id')]);
      });
   })
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="en" class="translate">English</button>
<button id="km" class="translate">ខ្មែរ</button>
<select id="language" class="translate" style="">
    <option value="en">English</option>
    <option value="km">ខ្មែរ</option>
</select>

<ul>
  <li class="lang" id="home">Home</li>
  <li class="lang" id="about">About Us</li>
  <li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>

Answer 2

Несколько вещей здесь:

1. Удалите кнопки
2. Измените прослушиватель событий на onchange, поскольку он будет срабатывать при изменении значения выбора.
3. Получите .val() вместо id выбора (который содержит вашу клавишу lang)

Вот пример с этими изменениями:

var arrLang = {
  'en': {
    'home': 'Home',
    'about': 'About Us',
    'contact': 'Contact Us',
    'desc': 'This is my description'
  },
  'km': {
    'home': 'ទំព័រដើម',
    'about': 'អំពីយើង',
    'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
    'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
  }
};

// Process translation
$(function() {
  $('.translate').on("change", function() {
    var lang = $(this).val();

    $('.lang').each(function(index, item) {
      $(this).text(arrLang[lang][$(this).attr('id')]);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="language" class="translate" style="">
  <option value="en">English</option>
  <option value="km">ខ្មែរ</option>
</select>

<ul>
  <li class="lang" id="home">Home</li>
  <li class="lang" id="about">About Us</li>
  <li class="lang" id="contact">Contact Us</li>
</ul>
<p class="lang" id="desc">This is my description</p>

<br>

Answer 3

Вы должны использовать .change() для выбора для правильного функционирования. Я внес достаточные изменения в ваш код.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Multiple Languages with Jquery and Json</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    var arrLang = {
      'en': {
        'home': 'Home',
        'about': 'About Us',
        'contact': 'Contact Us',
        'desc': 'This is my description'
      },
      'km': {
        'home': 'ទំព័រដើម',
        'about': 'អំពីយើង',
        'contact': 'ទំនាក់ទំនងយើងខ្ញុំ',
        'desc': 'នេះគឺជាអត្ថបទរបស់ខ្ញុំ'
      }
    };
    
    // Process translation
    $(document).ready(()=>{
      $("#language").change(function(){
        var lang = $(this).val()
        $('.lang').each(function(index, item){
          $(this).text(arrLang[lang][$(this).attr('id')])
        });
      })
    });
  </script>
</head>
<body>
  <select id="language" class="translate" style="">
      <option value="en">English</option>
      <option value="km">ខ្មែរ</option>
  </select>

  <ul>
    <li class="lang" id="home">Home</li>
    <li class="lang" id="about">About Us</li>
    <li class="lang" id="contact">Contact Us</li>
  </ul>
  <p class="lang" id="desc">This is my description</p>

  <br>
</body>
</html>