Odoo 11 Web模板中为<select>标签选择项绑定变量赋值

嘿，我来帮你搞定这个Odoo 11里的下拉框选中赋值需求！先看看你现有的模板代码，已经渲染出了大学选项，但还缺选中事件的绑定逻辑。下面给你两种实用的实现方式，选适合你场景的就行：

方案1：原生JavaScript快速实现 #

这个方式简单直接，适合自定义的独立Web模板页面。

第一步：修改模板添加事件绑定 #

先给你的<select>标签加上onchange事件，同时把Odoo的universities数组转成JS可访问的对象：

<div class="col-md-3 col-sm-3">
    <select class="form-control" id="university_id" name="university_id" onchange="handleUnivSelect(this)">
        <t t-foreach="universities" t-as="university">
            <option t-att-value="university.id"><t t-esc="university.name"/></option>
        </t>
    </select>
</div>

<!-- 新增JS代码块，放在模板合适位置 -->
<script>
    // 把Odoo后端传递的universities转为JS数组
    const allUniversities = <t t-esc="json.dumps(universities)" />;
    // 定义你需要的var_univ变量
    let var_univ = null;

    // 下拉框选中事件处理函数
    function handleUnivSelect(selectEl) {
        const selectedId = parseInt(selectEl.value);
        // 根据选中的id匹配对应的university对象
        var_univ = allUniversities.find(univ => univ.id === selectedId);
        
        // 这里可以加你需要的后续操作，比如打印验证
        console.log('选中的大学信息：', var_univ);
    }
</script>

注意点 #

• 确保后端传递的universities是可序列化的结构（比如字典列表，而不是直接的Odoo recordset），如果是Python控制器传递数据，可以这样处理：

  # 示例：在控制器中准备universities数据
  universities = [{
      'id': u.id,
      'name': u.name,
      # 可以添加你需要的其他字段，比如address等
  } for u in env['res.university'].search([])]
  

方案2：Odoo Widget规范实现 #

如果是在Odoo的Web客户端视图中（比如自定义表单、看板），更推荐用Odoo官方的Widget机制，符合框架生态：

第一步：修改模板添加数据属性 #

给下拉框加上data-universities属性，用来存储大学数据：

<div class="col-md-3 col-sm-3">
    <select class="form-control" id="university_id" name="university_id" t-att-data-universities="json.dumps(universities)">
        <t t-foreach="universities" t-as="university">
            <option t-att-value="university.id"><t t-esc="university.name"/></option>
        </t>
    </select>
</div>

第二步：编写Odoo JS Widget #

在你的模块static/src/js/目录下新建一个JS文件（比如university_handler.js）：

odoo.define('your_module_name.university_handler', function(require) {
    'use strict';

    const core = require('web.core');
    const Widget = require('web.Widget');

    const UniversitySelectHandler = Widget.extend({
        // 初始化绑定事件
        start: function() {
            this.$('#university_id').on('change', this._onUniversityChange.bind(this));
            return this._super.apply(this, arguments);
        },

        // 下拉框选中事件处理
        _onUniversityChange: function(e) {
            const selectedId = parseInt($(e.target).val());
            const universities = JSON.parse($(e.target).data('universities'));
            // 赋值给Widget内的变量，方便后续Odoo操作
            this.var_univ = universities.find(univ => univ.id === selectedId);
            
            // 示例：如果需要更新其他Odoo字段或触发视图动作
            console.log('Odoo Widget中选中的大学：', this.var_univ);
        }
    });

    return UniversitySelectHandler;
});

第三步：在视图中加载Widget #

在对应的模板或视图XML中引用这个JS文件，并初始化Widget：

<!-- 在视图头部添加JS引用 -->
<template id="your_template_id" inherit_id="web.layout">
    <xpath expr="//head" position="inside">
        <script type="text/javascript" src="/your_module_name/static/src/js/university_handler.js"></script>
    </xpath>
</template>

<!-- 在需要的地方初始化Widget -->
<script>
    const handler = new odoo.your_module_name.universityHandler();
    handler.appendTo($('#your_container_id'));
</script>

核心逻辑说明 #

不管哪种方案，核心都是：

1. 把Odoo后端的universities数据传递给前端JS
2. 监听下拉框的change事件
3. 根据选中的id匹配对应的大学对象，赋值给var_univ

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