根据下拉选项更改隐藏字段值

Question

我需要一些基本的JavaScript帮助。 我有一个带有下拉菜单的表单。 基于该下拉选择中的选择，我想更改隐藏字段的值。

例如，如果用户在下拉菜单中选择“ Google”，则我希望隐藏字段显示“ https://google.com ”，如果用户选择“ Bing”，我希望隐藏字段显示“ https：//” bing.com 。”

一个警告（不确定是否会更改脚本）是我为下拉菜单设置了唯一的值。 例如，“ Google”的值为5，而Bing的值为10。

任何帮助将不胜感激！

我已经尝试过以下简单脚本，但是我对Javascript经验不足，因此可能不正确。

<script>
var service = $('#service').val();
if(service == 'Google'){
   $('#hidden_field').val('https://google.com/')
} else {
   $('#hidden_field').val('https://bing.com')
}  
</script>

在上面的示例中，我希望Google的服务选项将Google URL添加到隐藏字段，所有其他选项将显示Bing。

Answer 1

您需要将javascript代码包装到一个函数中并将其绑定到事件处理程序：

<script>
    function fill()
    {
      let service = $('#service').val();
      if(service == 'Google'){
       $('#hidden_field').val('https://google.com/')
      } else {
       $('#hidden_field').val('https://bing.com')
      }
    }

    /* And the binding */
    $(document).ready(function()
    {
       $('#service').on("change", fill);
    });
</script>

Answer 2

您需要响应选择列表的更改事件：

<script>
$(function() {
    $('#service').on('change', function(e) {
        var score=e.target.value;
        $('#hidden_field').val(score);
    });
})
</script>