将其他选项的价值添加到下拉列表

时间:2019-11-10 06:39:24

标签: javascript

我正在使用一个称为Kintone的平台,并试图添加自定义Javascript,以便允许具有“ other”选项的选项的下拉列表。如果用户选择其他选项,则可以在该字段中输入要输入的内容,然后提交该值,然后将其保存在下拉列表中。以下是从Kintone的help page中提取的代码,该代码允许另一个按钮提取单独的文本字段来存储用户所需的值。我认为需要对此进行一些小的编辑,以便允许将值保存在下拉列表本身而不是单独的文本字段中。我不确定这是否是Kintone特有的问题(我知道它不是很常用),还是仅凭Javascript知识就可以解决(我在很大程度上缺乏:()。在此先感谢您的帮助!

(function () {
"use strict";

var RADIOBUTTON = "allergies";
var MULTICHOICE = "cause";
var TEXTFIELD = "other";
var RADIO_VALUE = "Yes";
var MULTI_VALUE = "Other";

//Events for detail, create and edit pages
var events = ['app.record.detail.show',
              'app.record.create.show',
              'app.record.create.change.' + RADIOBUTTON,
              'app.record.create.change.' + MULTICHOICE,
              'app.record.create.change.' + TEXTFIELD,
              'app.record.edit.show',
              'app.record.edit.change.' + RADIOBUTTON,
              'app.record.edit.change.' + MULTICHOICE,
              'app.record.edit.change.' + TEXTFIELD];

kintone.events.on(events, function(event) {

    var record = event.record;

    //Hide/unhide fields depending on field choices
    if (record[RADIOBUTTON]['value'] === RADIO_VALUE) {
        kintone.app.record.setFieldShown(MULTICHOICE, true);

        //If "Other" is not selected for the allergy cause, don't show a text field
        var fieldValue = record[MULTICHOICE]['value'];
        if (fieldValue.length === 0) {
            kintone.app.record.setFieldShown(TEXTFIELD, false);
        }

        //If "Other" is selected for the allergy cause, show a text field
        for (var i = 0; i < fieldValue.length; i++) {
            if (fieldValue[i] === MULTI_VALUE) {
                kintone.app.record.setFieldShown(TEXTFIELD, true);
            }else {
                kintone.app.record.setFieldShown(TEXTFIELD, false);
            }
        }
    }else {
        // If "No" is slected for "Do you have any food or drug allergies?", hide other fields
        kintone.app.record.setFieldShown(MULTICHOICE, false);
        kintone.app.record.setFieldShown(TEXTFIELD, false);
    }
});
})();

2 个答案:

答案 0 :(得分:1)

我们无法设置不在“ Kintone”的“下拉”字段中的值。

您可以使用API​​通过更改字段设置在下拉字段中添加选择。

我认为下面的这篇文章类似于您可以更改字段设置的事情。

▼添加表单字段

https://developer.kintone.io/hc/en-us/articles/115005506868-Add-Form-Fields

要更改“下拉列表”字段本身的设置,当您打开其他记录时,您还将看到在上述API中添加的选择。

请注意,您不能仅将选择添加到特定记录。

谢谢

Junko

答案 1 :(得分:1)

您可以使用以下示例代码来完成它。我使用kintone UI Component 用于下拉菜单,Underscore.js用于获取“其他”文本字段的不同值。 您只需要在上面的示例kintone应用程序中添加一个空格字段以显示下拉列表,并添加一个单行字段以保存下拉列表的选定值。 代码要做的是获取“ other”字段的所有不同值,并将这些项目添加到下拉列表中。 另外,您可以稍作调整即可使用MultipleChoice控件。

(function() {
    "use strict";

    var RADIOBUTTON = "allergies";
    var TEXTFIELD = "other";
    var RADIO_VALUE = "Yes";
    var DROPDWON_VALUE = "Other";
    var CHOICE = "choice";

    // kintone UI Component constructor
    var dropdown = new kintoneUIComponent.Dropdown({
        items: [
                {
                    label: 'Drugs',
                    value: 'Drugs'
                },
                {
                    label: 'Food',
                    value: 'Food'
                }
        ]
    });
    var body = {
        'app': kintone.app.getId(),
        'fields': [TEXTFIELD],
        'query': TEXTFIELD + ' != "" order by $id asc limit 500'
    };
    kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
        // success
        var records = resp.records;
        var other = [];
        var items = dropdown.getItems();

        records.forEach(function(rcd) {
            other.push(rcd[TEXTFIELD]['value']);
        });
        var unique = _.uniq(other);
        unique.forEach(function(cause) {
            items.push({label: cause, value: cause});
        });
        items.push({label: DROPDWON_VALUE, value: DROPDWON_VALUE});
        dropdown.setItems(items);
    }, function(error) {
    // error
        console.log(error);
    });

    dropdown.hide();
    var showHideTextField = function(record) {

        //Hide/unhide fields depending on field choices
        if (record[RADIOBUTTON]['value'] === RADIO_VALUE) {
            dropdown.show();
            var show = false;
            var selected_value = dropdown.getValue();

            if (selected_value === DROPDWON_VALUE) {
                show = true;
            }
            kintone.app.record.setFieldShown(TEXTFIELD, show);
        } else {
            dropdown.hide();
            kintone.app.record.setFieldShown(TEXTFIELD, false);
        }
    };
    var setDropdownValues = function(record) {
        var selected_value = record[CHOICE]['value'];
        dropdown.setValue(selected_value);
    };

    //Detail Event
    kintone.events.on('app.record.detail.show', function(event) {
        kintone.app.record.setFieldShown(CHOICE, true);
        kintone.app.record.setFieldShown(TEXTFIELD, false);
        dropdown.hide();
    });
    //Create/Edit Events
    kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
        if (event.type === 'app.record.edit.show') {
            setDropdownValues(event.record);
        }
        showHideTextField(event.record);
        kintone.app.record.getSpaceElement('cause').appendChild(dropdown.render());
        kintone.app.record.setFieldShown(CHOICE, false);
        dropdown.on('change', function(value) {
            var show = false;
            var selected_value = dropdown.getValue();
            if (selected_value === DROPDWON_VALUE) {
                show = true;
            }
            var rcrd = kintone.app.record.get();
            rcrd.record[CHOICE]['value'] = selected_value;

            kintone.app.record.set(rcrd);
            //If "Other" is selected for the allergy cause, show a text field
            //If "Other" is not selected for the allergy cause, don't show a text field
            kintone.app.record.setFieldShown(TEXTFIELD, show);
        });
    });
    //Change Events
    kintone.events.on(['app.record.create.change.' + RADIOBUTTON, 'app.record.edit.change.' + RADIOBUTTON], function(event) {
        showHideTextField(event.record);
        kintone.app.record.setFieldShown(CHOICE, false);
        dropdown.on('change', function(value) {
            var show = false;
            var selected_value = dropdown.getValue();
            if (selected_value === DROPDWON_VALUE) {
                show = true;
            }
            var rcrd = kintone.app.record.get();
            rcrd.record[CHOICE]['value'] = selected_value;

            kintone.app.record.set(rcrd);
            //If "Other" is selected for the allergy cause, show a text field
            //If "Other" is not selected for the allergy cause, don't show a text field
            kintone.app.record.setFieldShown(TEXTFIELD, show);
        });
    });
    //Submit Events
    kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) {
        var selected_value = dropdown.getValue();
        if (selected_value === DROPDWON_VALUE) {
            event.record[CHOICE]['value'] = event.record[TEXTFIELD]['value'];
        }
        kintone.app.record.setFieldShown(CHOICE, false);
        return event;
    });
})();
Medical Questionnaire