undefinedfix
Sign in

There is a drop-down box in ES6 string splicing. How to put the data in the loop

user616213 edited in Mon, 19 Sep 2022
 <select  name="servicePeriod" class="select_condition">
        <option value="请选择">请选择</option>
         <option value="不限">不限</option>
</select>
3 Replies
fhjcc
commented on Mon, 19 Sep 2022
        <select  name="servicePeriod" class="select_condition">
                         <option value="">请选择</option>
                         <option value="0">不限</option>
                         ${servicePeriod.map(servicePeriod=>`
                            <option value="${servicePeriod.dictValue}">${servicePeriod.dictLabel}</option>
                                `).join('')}
                         </select>
zille
commented on Mon, 19 Sep 2022

Hi, thumb generation

I have read your problem description, but it seems that it is too little. I understand it for a while, and I don't know if it means that

There is a data structure similar to the following

const data = [
  {
    label: '请选择',
    value: '请选择',
  },
  {
    label: '不限',
    value: '不限',
  },
  ...
];

Then generate options and put them into select. You mentioned string splicing using ES6

function getOptions(data) {
  return data.map(({label, value}) => {
    return `<option value="${value}">${label}</option>`;
  }).join('');
}

Finally, we need to put the generated string into the select. If we use jQuery, this problem will be better solved

$('.select_condition').html(getOptions(data));

Hope to help you.

Braden
commented on Mon, 19 Sep 2022

vue:v-for; If you have less options, you can write dead; if you have more options, you can see how to loop out dynamically;