Ad

Disabling The Dropdown For Select Tag From The Method In Polymer Dom-module Not Working

I am trying to disable the country dropdown based on disabled_value value got from backend code

If the value of disabled_value is 0, hide the dropdown and make it not selectable dropdown

If the value of disabled_value is 1, make the dropdown to select the country available

<dom-module>
<template>
<div>
    <select disabled="[[ _disableDropdown ]]">
        <template is="dom-repeat" items="[[ country_list_and_code ]]">
            <option value="[[ item.0 ]]” value>[[ item.1 ]]</option>
        </template>
    </select>
</div>
</template>

<script>
Polymer({
    is: ‘country’,
    properties: {
        disabled_value: {
            type: Number,
        },
    },

    _disableDropdown: function(disabled_value) {
        if (disabled_value) {
            return disabled_value.disabled;
        } else {
            return disabled_value.enabled;
        }
    }
});
</script>
</dom-module>

This is the HTML tag I get from the code

<option value="AF">Afghanistan</option>                       
<option value="AX">Aland Islands</option>      
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="DZ">United States</option>

What I am trying to achieve is:

  • If the disabled_value is 0, then only show the United States country in the dropdown and disabled the selection in dropdown
  • If the disabled_value is 1, then only show all the countries in the dropdown and allow selection in dropdown

Can anyone please help?

Thanks in advance

Ad

Answer

You should try to set or not to set attribut "disabled", for example https://jsfiddle.net/k0wnu3p1/4/

<select name="tagging" disabled>
        <option selected>I'm working</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
</select>
Ad
source: stackoverflow.com
Ad