#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>