可手动输入下拉框：自动加千位分隔符且后端接收无分隔符数值

1. 替换原下拉框为可输入组件 #

把原生<select>替换成输入框+数据列表的组合，既保留下拉选择功能，又支持手动输入：

<!-- 前端显示用的输入框，展示带千位分隔符的数值 -->
<input 
    type="text" 
    id="priceDisplay" 
    placeholder="选择或输入价格" 
    style="height:50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;"
    list="priceOptions"
>
<!-- 数据列表，保留原有的预设选项 -->
<datalist id="priceOptions">
    <option value="5,00,000 RS"></option>
    <option value="10,00,000 RS"></option>
    <option value="15,00,000 RS"></option>
    <option value="20,00,000 RS"></option>
    <option value="25,00,000 RS"></option>
    <option value="30,00,000 RS"></option>
    <option value="35,00,000 RS"></option>
    <option value="40,00,000 RS"></option>
    <option value="45,00,000 RS"></option>
    <option value="50,00,000 RS"></option>
    <option value="55,00,000 RS"></option>
    <option value="60,00,000 RS"></option>
    <option value="65,00,000 RS"></option>
    <option value="70,00,000 RS"></option>
    <option value="75,00,000 RS"></option>
    <option value="80,00,000 RS"></option>
    <option value="85,00,000 RS"></option>
</datalist>
<!-- 隐藏输入框，绑定后端模型，传递纯数字值 -->
<input type="hidden" asp-for="Input.price" id="priceValue">

2. JavaScript处理格式化与值同步 #

添加JS代码实现以下逻辑：

• 手动输入时自动过滤非数字字符，添加印度式千位分隔符显示
• 选择预设选项时，自动提取纯数字同步到隐藏字段
• 页面加载时初始化显示已有值

const displayInput = document.getElementById('priceDisplay');
const hiddenInput = document.getElementById('priceValue');

// 把纯数字格式化为带印度式千位分隔符的字符串
function formatToIndianNumber(num) {
    return num.toLocaleString('en-IN') + ' RS';
}

// 从格式化字符串中提取纯数字
function getPureNumber(str) {
    return str.replace(/[^0-9]/g, '');
}

// 监听输入事件
displayInput.addEventListener('input', function(e) {
    let inputVal = e.target.value;
    // 处理选择下拉选项的情况
    if (inputVal.includes('RS')) {
        hiddenInput.value = getPureNumber(inputVal);
        return;
    }
    // 处理手动输入的情况
    const pureNum = getPureNumber(inputVal);
    if (pureNum) {
        e.target.value = formatToIndianNumber(parseInt(pureNum));
        hiddenInput.value = pureNum;
    } else {
        e.target.value = '';
        hiddenInput.value = '';
    }
});

// 页面加载时初始化已有值
window.addEventListener('load', function() {
    if (hiddenInput.value) {
        displayInput.value = formatToIndianNumber(parseInt(hiddenInput.value));
    }
});

3. 核心说明 #

• 用<datalist>实现「下拉选择+手动输入」的双重能力，比原生<select>更灵活
• 隐藏字段asp-for="Input.price"直接绑定后端模型，确保提交的是无分隔符的纯数字
• 用toLocaleString('en-IN')匹配原选项的印度式千位分隔规则（每两位分隔）
• 输入时自动过滤非数字字符，避免无效输入干扰

内容的提问来源于stack exchange，提问作者Qasim Asghar