Блог

Главная - Вопросы по программированию - Скрыть текст перед символом знака доллара в настройках, не удаляя полностью

Скрыть текст перед символом знака доллара в настройках, не удаляя полностью

#javascript #jquery

#javascript #jquery ( jquery )

Вопрос:

Я пытаюсь найти способ выбрать часть строки перед знаком доллара в меню выбора. Прямо сейчас я просто пытаюсь скрыть его, чтобы он не отображался в выпадающем списке, но он будет использоваться позже, поэтому я не хочу просто удалять его, потому что мне нужно будет иметь возможность использовать его в переменной, когда выбран параметр.

  var seminiars; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
<option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>
</select>

До сих пор мне удавалось удалить его только полностью, но затем я не смог сохранить его и использовать, когда кто-то выбирает один из вариантов.

Примечание: я не могу редактировать html напрямую, код генерируется автоматически.

Комментарии:

1. Почему бы не использовать для этого атрибут data?

Ответ №1:

хорошо… Я только что заметил примечание сбоку.

Я не могу редактировать html напрямую, код генерируется автоматически.

Хитрость здесь будет заключаться в том, чтобы установить значение данных для каждого option из них.

 // Run that loop to set the data values for each option
$("select option").each(function() {
  let optionText = $(this).text();
  let textSplit = optionText.split("$")
  $(this).data("before_dolard_sign", textSplit[0])
  $(this).text(textSplit[1])
})

$("select").on("change", function() {
  // So on change, you have access to it
  console.log($(this).find("option:selected").data("before_dolard_sign"))
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
  <option>1$5,000</option>
  <option>2$10,000</option>
  <option>5$100,000</option>
  <option>10$500,000</option>
</select>

Ответ №2:

Вы можете использовать этот value атрибут для хранения дополнительной информации, не содержащейся в тексте, видимом пользователю. Я добавил некоторый код ниже, чтобы показать, как вы можете получить текст или значение, выбранные пользователем.

Если это не подходит, я также создал тестовый ввод и кнопку, которая помогает продемонстрировать, как вы можете разделить строку так, как вам нужно.

Код полностью прокомментирован.

Дайте мне знать, если вы надеялись на что-то еще.

 // Detect when user changes select option
$("#selectTest").change(function() {

  // Get the text selected by the user
  console.log($("#selectTest option:selected").text());

  // Get the value selected by the user
  console.log($(this).val());

});


// Add click event
$("#splitButton").click(function() {

  // Get input value
  var test = $("#splitTest").val();

  // Split around dollar sign
  var els = test.split("$");

  // Print values to show we did it correctly
  console.log(els[0]);
  console.log("$"   els[1]);

}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="selectTest">
  <option value="1$5,000">$5,000</option>
  <option value="1$5,000">$10,000</option>
  <option value="5$100,000">$100,000</option>
  <option value="10$500,000">$500,000</option>
</select>

<input id="splitTest" value="10$500,000">
<button id="splitButton">Show Split</button>

Ответ №3:

почему бы не поместить эти данные в data-meta атрибут?

вместо

 <option>1$5,000</option>
<option>2$10,000</option>
<option>5$100,000</option>
<option>10$500,000</option>

возможно

 <option data-meta="1">$5,000</option>
<option data-meta="2">$10,000</option>
<option data-meta="5">$100,000</option>
<option data-meta="10">$500,000</option>

затем вы можете найти selected опцию и использовать element.getAttribute("data-meta") для извлечения данных, когда вам это нужно

редактировать: теперь я вижу вашу сторону — обратите внимание, что вы не можете редактировать html. ну, замените его. перебирайте html, используйте .split для textContent и переместите эти метаданные в атрибут

Ответ №4:

Используйте атрибут data для хранения информации, а затем запустите прослушиватель событий для извлечения набора данных при выборе при изменении?

 const select = document.querySelectorAll('#money');

select.forEach((val) => {
  if (val.value != 'undefined') {
    val.addEventListener('change', () => {
      let data = val.options[val.selectedIndex].dataset['num'];
      console.log(data)
    })
  }
}); 
 <select id="money">
  <option style="display: none;">-->Select an option below<--</option>
  <option data-num='1' class='opt' value='5000'>$5,000</option>
  <option data-num='2' class='opt' value='10000'>$10,000</option>
  <option data-num='5' class='opt' value='100000'>$100,000</option>
  <option data-num='10' class='opt' value='500000'>$500,000</option>
</select>

Метки: