如何用jQuery修改select关联的innerHTML并实现HTTP/HTTPS协议切换

没问题，我来帮你把这个功能转换成jQuery实现，同时完美满足你切换HTTP/HTTPS前缀的需求。下面是完整的解决方案和思路：

核心思路 #

1. 把内联的onchange事件换成jQuery的事件绑定，实现代码解耦，更符合前端最佳实践；
2. 给协议前缀（http://）单独加一个标签标识，方便我们动态修改它；
3. 根据选中的域名判断应该使用http://还是https://，再同步更新页面上的协议和域名内容。

完整代码实现 #

<div><span id='protocol'>http://</span><span id='mydiv'>example0.com</span></div>
<select>
  <option>example1.com</option>
  <option>example2.com</option>
  <option>example3.com</option>
  <option>example4.com</option>
</select>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  // 绑定select的change事件
  $('select').on('change', function() {
    // 获取当前选中的域名
    const selectedDomain = $(this).val();
    // 默认使用http协议
    let protocol = 'http://';
    
    // 判断是否需要切换为https协议
    const httpsDomains = ['example1.com', 'example3.com'];
    if (httpsDomains.includes(selectedDomain)) {
      protocol = 'https://';
    }
    
    // 更新页面上的协议和域名
    $('#protocol').text(protocol);
    $('#mydiv').text(selectedDomain);
  });
});
</script>

代码说明 #

• 我们移除了原生的内联onchange事件，改用$('select').on('change', ...)来绑定事件，这样HTML结构更干净，逻辑代码也更集中；
• 用数组httpsDomains来维护需要使用HTTPS的域名，以后如果要新增或修改，直接修改数组即可，扩展性更强；
• 通过$('#protocol').text(protocol)动态切换协议前缀，$('#mydiv').text(selectedDomain)更新域名内容，操作DOM更简洁。

额外优化建议 #

如果想让页面初始化时就和默认选中的域名匹配（比如默认选中example1.com时，页面自动显示https://example1.com），可以在页面加载完成后手动触发一次change事件：

$(document).ready(function() {
  $('select').on('change', function() {
    // 原事件处理代码...
  }).trigger('change'); // 初始化时触发一次change事件
});

内容的提问来源于stack exchange，提问作者user10972090