js+html+jq

问题遇到的现象和发生背景

html + js + jq 为老旧代码进行部分改造

遇到的现象和发生背景，请写出第一个错误信息

遇到一个思路问题，页面上现在有一个下拉框，现在这个下拉框我只想写一次（不要在每个页面都写），相当于公用吧，然后对于每个页面我都是用的ifarm来显示子页面，要求是，我切换下拉框的时候，所有的子页面都能够根据下拉选项完成数据更新（不刷新页面）。

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

运行结果及详细报错内容

问题难点：我不知道如何去在其他子页面像vue 一样监听到下拉框变化。备注：下拉框我写在了index.html页面，其他页面要跟着响应

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

尝试过 Object.defineProperty 方法去监听本地缓存， 失败了，无法获取这个属性，求一个思路或者解决办法

我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

ifarm 设计页面跨域通信吧，你这个不在一个页面肯定监听不到，除非挂载到一个公共的域，比如顶级的window下，或者啥的，再去做监听，不确定可行。你试试。

可以使用 include 标签引入你的下拉框，下拉框加一个onblur事件，点击的时候获取你的值，然后ajax请求数据，再把数据给你的页面

不跨域的话，可以考虑直接使用iframe对象调用，可以参考文章 https://www.cnblogs.com/ljhero/archive/2011/07/09/2101540.html
跨域的话，可以考虑使用postMessage，可以参考文章 https://juejin.cn/post/6844904120680185869

<script src="jquery.min.js"></script>
<select id="select">
<option value="1">值1</option>
<option value="2">值2</option>
<option value="3">值3</option>
</select>
<iframe src="test1.html" id="iframeSon" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
<script>
$(function(){
    $("#select").change(function(){
        var v=$("#select").val();
        //alert(v);
        if(v==1){
          $("#iframeSon").attr("src","t1.html");
        }else if(v==2){
            $("#iframeSon").attr("src","t2.html");
        }else if(v==3){
            $("#iframeSon").attr("src","t3.html");
        }
    })
})
</script>

iframe默认显示t1.html,然后根据选项加载不同的HTML内容，每个HTML内容你可以根据select选项提前加载JSON数据，不同select选项用不同HTML，HTML相当于缓存数据，可以根据你后端select选项，循环生成HTML数据，这个和缓存区别不大

• 你看下这篇博客吧, 应该有用👉 ：html+js

你可以使用jq的load()方法来加载子页面，这样页面变量是可以直接共享的。
如：父页面js，下拉框更改时将变量修改

```html
var testVal = "123";
    function click(){
        testVal = 456
        $("#service-content").load('ybjk/product.html'); //修改变量后重新执行load可更新
    }

子页面js，子页面可以直接获取变量，进行数据更新

```javascript
console.log(testVal)

另外，（如果有服务端，可直接使用load()传参，返回页面）