Как найти подходящее имя переменной для выбранной опции? - PullRequest
Новая
       6

Как найти подходящее имя переменной для выбранной опции?

0 голосов
/ 19 сентября 2019

У меня есть функция JavaScript, которая срабатывает при изменении события.Первый шаг - проверить, какое значение выбрано пользователем.Далее нужно найти соответствующий набор опций, которые будут заполнены в другом меню выбора.Вот пример моего кода: 

$("#type").on("change", function() {
  var typeVal = $(this).val();

  var approved = [{
    id: 1,
    text: "Month"
  }, {
    id: 2,
    text: "Week"
  }];
  var active = [{
    id: 1,
    text: "Progress"
  }, {
    id: 2,
    text: "No Feedback"
  }, {
    id: 3,
    text: "Office Closed"
  }];
  var inactive = [{
    id: 1,
    text: "Missing"
  }, {
    id: 2,
    text: "Expired"
  }];
  var terminated = [{
    id: 1,
    text: "Natural"
  }, {
    id: 2,
    text: "None"
  }];

  var menuOptions = {
    "1": "approved",
    "2": "active",
    "3": "inactive",
    "4": "terminated",
    "5": "inactive",
    "6": "active"
  };
  
  var getOptions = menuOptions[typeVal];
  console.log(eval(getOptions));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="type" id="type">
  <option value="">Select Type</option>
  <option value="1">Approved</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
  <option value="4">Terminated</option>
  <option value="5">Closed</option>
  <option value="6">Pending</option>
</select>

Пока мой код работает, но я использую функцию eval().Я вижу много сообщений об этих функциях, и этого следует избегать, если это возможно.Я смотрю, есть ли лучший способ достичь той же цели без этой функции в JavaScript?Если у Вас есть предложения, пожалуйста, дайте мне знать.Благодаря.

Ответы [ 2 ]

2 голосов
/ 19 сентября 2019

Вы можете обращаться к переменным, которые существуют в определенном контексте, так же, как вы обращаетесь к массиву или ключу объекта.

Если у вас есть переменные внутри вашей функции обратного вызова onchange, вы можете изменить window[getOptions] на this[getOptions]. 

$("#type").on("change", function() {
  var typeVal = $(this).val();
  
  var getOptions = menuOptions[typeVal];
  console.log(window[getOptions]);
});


var menuOptions = {
  "1": "approved",
  "2": "active",
  "3": "inactive",
  "4": "terminated",
  "5": "inactive",
  "6": "active"
};

var approved = [{
  id: 1,
  text: "Month"
}, {
  id: 2,
  text: "Week"
}];
var active = [{
  id: 1,
  text: "Progress"
}, {
  id: 2,
  text: "No Feedback"
}, {
  id: 3,
  text: "Office Closed"
}];
var inactive = [{
  id: 1,
  text: "Missing"
}, {
  id: 2,
  text: "Expired"
}];
var terminated = [{
  id: 1,
  text: "Natural"
}, {
  id: 2,
  text: "None"
}];
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="type" id="type">
  <option value="">Select Type</option>
  <option value="1">Approved</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
  <option value="4">Terminated</option>
  <option value="5">Closed</option>
  <option value="6">Pending</option>
</select>
1 голос
/ 19 сентября 2019

Вы можете использовать следующий код: 

console.log(Object.entries(menuOptions).filter(([a, b]) => a == typeVal)[0][1]);
...