Dropdown in which manually write also and convert the number automatically into comma separated-CodePudding

I make the the dropdown in which pass the integer value but now I have to make the dropdown in which I write manually and the number which I write automatically comma separated but the value pass to the backend is without comma separated number. My View:

<select asp-for="Input.price" placeholder="Please Select price" style="height:50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:20px;">
  <option value="" hidden>Select Price</option>
  <option value="500000">5,00,000 RS</option>
  <option value="1000000">10,00,000 RS</option>
  <option value="1500000">15,00,000 RS</option>
  <option value="2000000">20,00,000 RS</option>
  <option value="2500000">25,00,000 RS</option>
  <option value="3000000">30,00,000 RS</option>
  <option value="3500000">35,00,000 RS</option>
  <option value="4000000">40,00,000 RS</option>
  <option value="4500000">45,00,000 RS</option>
  <option value="5000000">50,00,000 RS</option>
  <option value="5500000">55,00,000 RS</option>
  <option value="6000000">60,00,000 RS</option>
  <option value="6500000">65,00,000 RS</option>
  <option value="7000000">70,00,000 RS</option>
  <option value="7500000">75,00,000 RS</option>
  <option value="8000000">80,00,000 RS</option>
  <option value="8500000">85,00,000 RS</option>
  <option value="7000000">70,00,000 RS</option>
  <option value="7500000">75,00,000 RS</option>
  <option value="8000000">80,00,000 RS</option>
  <option value="8500000">85,00,000 Rs</option>
</select>

CodePudding user response：

Perhaps a datalist in combination with a hidden field

Changing it on the backend is of course also an option if you have access. You still need to do proper input cleaning there.

Note the conversion needs the currency sign to be where it is expected. Here in front of the number in the data list

const num2rs = val => val.toLocaleString('en-IN', {
    maximumFractionDigits: 0,
    style: 'currency',
    currency: 'INR'
});
document.getElementById("rsInput").addEventListener("input", function() {
  this.value = num2rs( this.value.replace(/\D/g,""))
  document.getElementById("Input.price").value = this.value.replace(/\D/g,"")
})

<!-- make this type="hidden" and remove the br -->
<input type="text" name="Input.price" id="Input.price" /><br/>
<!-- Hidden field above-->

<input list="Input.price.list" id="rsInput" placeholder="Please Select price"> 
<datalist id="Input.price.list">
  <option value="₹5,00,000">
  <option value="₹10,00,000">
  <option value="₹15,00,000">
  <option value="₹20,00,000">
  <option value="₹25,00,000">
  <option value="₹30,00,000">
  <option value="₹35,00,000">
  <option value="₹40,00,000">
  <option value="₹45,00,000">
  <option value="₹50,00,000">
  <option value="₹55,00,000">
  <option value="₹60,00,000">
  <option value="₹65,00,000">
  <option value="₹70,00,000">
  <option value="₹75,00,000">
  <option value="₹80,00,000">
  <option value="₹85,00,000">
  <option value="₹70,00,000">
  <option value="₹75,00,000">
  <option value="₹80,00,000">
  <option value="₹85,00,000">
</datalist>