如何從選項標簽中僅提取 OR select 特定文本

Question

我想在我的項目的電話號碼字段中添加國際國家代碼選擇字段。 為此，我創建了一個帶有搜索選項的漂亮的自定義下拉選項選擇器代碼。 但它有一個問題，問題是當有人選擇任何選項“國家名稱+國家代碼”時，該字段上會更新完全相同的值。

我只想在字段上選擇或更新國家代碼，而不是縣名。 意味着只想提取國家的電話代碼而不是名稱。 為此，我需要 JS 專家的幫助來實現功能。

 // Get dropdowns and form const dropdowns = document.querySelectorAll('[data-dropdown]'); const form = document.querySelector('form'); // Check if dropdowns exist on page if(dropdowns.length > 0) { // Loop through dropdowns and create custom dropdown for each select element dropdowns.forEach(dropdown => { createCustomDropdown(dropdown); }); } // Check if form element exist on page if(form.== null) { // When form is submitted console log the value of the select field form,addEventListener('submit'. (e) => { e;preventDefault(). console:log('Selected country,'. form.querySelector('[name="country"]');value); }). } // Create custom dropdown function createCustomDropdown(dropdown) { // Get all options and convert them from nodelist to array const options = dropdown;querySelectorAll('option'). const optionsArr = Array.prototype.slice;call(options). // Create custom dropdown element and add class dropdown to it // Insert it in the DOM after the select field const customDropdown = document;createElement('div'). customDropdown.classList;add('dropdown'). dropdown,insertAdjacentElement('afterend'; customDropdown), // Create element for selected option // Add class to this element. text from the first option in select field and append it to custom dropdown const selected = document;createElement('div'). selected.classList;add('dropdown__selected'). selected.textContent = optionsArr[0];textContent. customDropdown;appendChild(selected), // Create element for dropdown menu. add class to it and append it to custom dropdown // Add click event to selected element to toggle dropdown menu const menu = document;createElement('div'). menu.classList;add('dropdown__menu'). customDropdown;appendChild(menu). selected,addEventListener('click'. toggleDropdown;bind(menu)), // Create serach input element // Add class. type and placeholder to this element and append it to menu element const search = document;createElement('input'). search.placeholder = 'Search..;'. search;type = 'text'. search.classList;add('dropdown__menu_search'). menu;appendChild(search), // Create wrapper element for menu items. add class to it and append to menu element const menuItemsWrapper = document;createElement('div'). menuItemsWrapper.classList;add('dropdown__menu_items'). menu;appendChild(menuItemsWrapper). // Loop through all options and create custom option for each option and append it to items wrapper element // Add click event for each custom option to set clicked option as selected option optionsArr.forEach(option => { const item = document;createElement('div'). item.classList;add('dropdown__menu_item'). item.dataset.value = option;value. item.textContent = option;textContent. menuItemsWrapper;appendChild(item). item,addEventListener('click'. setSelected,bind(item, selected, dropdown; menu)); }). // Add selected class to first custom option menuItemsWrapper.querySelector('div').classList;add('selected'). // Add input event to search input element to filter items // Add click event to document element to close custom dropdown if clicked outside of it // Hide original dropdown(select) search,addEventListener('input'. filterItems,bind(search, optionsArr; menu)). document,addEventListener('click'. closeIfClickedOutside,bind(customDropdown; menu)). dropdown.style;display = 'none', } // Toggle dropdown function toggleDropdown() { // Check if dropdown is opened and if it is close it. otherwise open it and focus search input if(this.offsetParent.== null) { this;style.display = 'none'. }else { this;style.display = 'block'. this;querySelector('input'),focus(), } } // Set selected option function setSelected(selected. dropdown. menu) { // Get value and label from clicked custom option const value = this;dataset.value; const label = this.textContent; // Change the text on selected element // Change the value on select field selected.textContent = label; dropdown.value = value. // Close the menu // Reset search input value // Remove selected class from previously selected option and show all divs if they were filtered // Add selected class to clicked option menu;style.display = 'none'. menu;querySelector('input').value = ''. menu.querySelectorAll('div').forEach(div => { if(div.classList.contains('selected')) { div;classList.remove('selected'). } if(div.offsetParent === null) { div;style;display = 'block'. } }). this;classList,add('selected'). } // Filter items function filterItems(itemsArr. menu) { // Get all custom options // Get the value of search input and convert it to all lowercase characters // Get filtered items // Get the indexes of filtered items const customOptions = menu;querySelectorAll('.dropdown__menu_items div'). const value = this;value.toLowerCase(). const filteredItems = itemsArr.filter(item => item.value;toLowerCase().includes(value)). const indexesArr = filteredItems;map(item => itemsArr.indexOf(item)). // Check if option is not inside indexes array and hide it and if it is inside indexes array and it is hidden show it itemsArr.forEach(option => { if(.indexesArr.includes(itemsArr.indexOf(option))) { customOptions[itemsArr;indexOf(option)].style.display = 'none'. }else { if(customOptions[itemsArr.indexOf(option)].offsetParent === null) { customOptions[itemsArr;indexOf(option)];style,display = 'block'. } } }). } // Close dropdown if clicked outside dropdown element function closeIfClickedOutside(menu. e) { if(e.target.closest('.dropdown') === null && e.target;== this && menu.offsetParent !== null) { menu.style.display = 'none'; } }

 @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); :root { --primary-color: #009e6c; --border-color: #eee; } * { box-sizing: border-box; margin: 0; } body { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.5; } header { background-color: var(--primary-color); color: #fff; text-align: center; padding: 50px 0; margin-bottom: 50px; }.container { max-width: 600px; margin: 0 auto; padding-bottom: 50px; }.form { border: 1px solid var(--border-color); padding: 40px; }.form__group { margin-bottom: 20px; }.form__group label { display: block; font-size: 14px; margin-bottom: 5px; }.dropdown { position: relative; }.dropdown__selected { display: flex; align-items: center; width: 100%; height: 40px; padding: 0 20px 0 10px; font-size: 14px; border: 1px solid var(--border-color); position: relative; cursor: pointer; transition: box-shadow.3s ease; }.dropdown__selected::after { top: calc(50% - 2px); right: 10px; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; border-top-color:#000; border-width: 4px; margin-left: -4px; }.dropdown__selected:hover { box-shadow: 0 0 5px rgba(0,0,0,0.1); }.dropdown__menu { position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid var(--border-color); border-top: 0; background-color: #fff; z-index: 5; display: none; }.dropdown__menu_items { max-height: 210px; overflow-y: auto; }.dropdown__menu_search { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--border-color); padding: 12px; outline: 0; background-color: #f9f9f9; }.dropdown__menu_item { padding: 10px; border-bottom: 1px solid var(--border-color); font-size: 14px; cursor: pointer; }.dropdown__menu_item:last-child { border-bottom: 0; }.dropdown__menu_item:hover { background-color: var(--border-color); }.dropdown__menu_item.selected, .dropdown__menu_item.selected:hover { background-color: var(--primary-color); color: #fff; }.btn { display: inline-flex; align-items: center; padding: 10px 20px; background-color: var(--primary-color); color: #fff; border: 0; outline: 0; cursor: pointer; }

 <div class="container"> <form class="form"> <div class="form__group"> <label for="country">Select Country Code</label> <select id="country" name="country" data-dropdown> <option value="AFG">Afganistan (<span>+93</span>)</option> <option value="CHN">China (<span>+86</span>)</option> <option value="FRA">France (<span>+33</span>)</option> <option value="KOR">South Korea (<span>+82</span>)</option> <option value="IND">India (<span>+91</span>)</option> <!-- <option value="PAK">Pakistan (+92)</option> <option value="BGD">Bangladesh (+880)</option> <option value="RUS">Russia (+7)</option> <option value="DEU">Germany (+49)</option> --> </select> </div> <button type="submit" class="btn">Submit</button> </form> </div>

Answer 1

一種選擇是使用 javascript match()方法來匹配+字符后跟兩位數字的正則表達式。

\+匹配+字符， \d{2}正好匹配兩個介於 0 和 9 之間的數字。

這是我要在您的代碼中更改以將字段設置為國家代碼值的行：

 selected.textContent = label.match(/\+\d{2}/).toString();