JS Select an option base on the label value/innerText-CodePudding

HTML

<input  value="" name="points_on_deed" id="points_on_deed" type="text" data-field-name="points_on_deed">

<input  value="" name="price_per_point" id="price_per_point" type="text" data-field-name="price_per_point">

<input  value="" name="price" id="price" type="text" data-field-name="price">


<select name="mason_title_florida" data-field-name="mason_title_florida"
id="mason_title_florida" data-default-val="" 
required="required">
<option value="" selected="">Set Price...</option>
<option value="508">5000</option>
<option value="515">6000</option>
<option value="522">7000</option>
<option value="529">8000</option>
<option value="536">9000</option>
<option value="543">10000</option>
<option value="550">11000</option>

Javascript

    var flclosing = document.getElementById("mason_title_florida");
    var caclosing = document.getElementById("mason_title_california");
    var scclosing = document.getElementById("mason_title-south_carolina");
    var price = document.getElementById("price");
    var points = document.getElementById("points_on_deed");
    var ppp = document.getElementById("price_per_point");
    
   points.addEventListener("keyup", setPrice);
   ppp.addEventListener("keyup", setPrice);
   
   function setPrice() {
       price.value = points.value*ppp.value;
       setFLClosingCost();
   }
   
   function setFLClosingCost() {
       
       var roundedPrice = Math.ceil(price.value/1000)*1000;
       
       if (roundedPrice <= 5000){
           roundedPrice = 5000;
       } 
       
       if (flclosing.style.display != "none") {
           flclosing.selectedIndex = roundedPrice;
       }
   }

I am trying to select my option based on the label text and not the value.

The breakdown: Enter Points: 100 Enter Price Per Point: 100 Price is Calculated with setPrice().

The next function rounds that price so it matches my select field labels.

How can I select the option based on the rounded number?

If my price is 10,915. It will round my value to 11,000 (it works up to this point). How can I select the label 11000 from my select list?

I am running this script in Wordpress using jetengine and elementor. I have a glossary setup for my select field.

CodePudding user response：

I updated

flclosing.selectedIndex = roundedPrice;

flclosing.selectedIndex = roundedPrice / 1000 - 4;

var flclosing = document.getElementById("mason_title_florida");
var caclosing = document.getElementById("mason_title_california");
var scclosing = document.getElementById("mason_title-south_carolina");
var price = document.getElementById("price");
var points = document.getElementById("points_on_deed");
var ppp = document.getElementById("price_per_point");

points.addEventListener("keyup", setPrice);
ppp.addEventListener("keyup", setPrice);

function setPrice() {
   price.value = points.value * ppp.value;
   setFLClosingCost();
}

function setFLClosingCost() {

   var roundedPrice = Math.ceil(price.value/1000)*1000;

   if (roundedPrice <= 5000){
       roundedPrice = 5000;
   } 

   if (flclosing.style.display != "none") {
       flclosing.selectedIndex = roundedPrice / 1000 - 4;
   }
}

<input  value="" name="points_on_deed" id="points_on_deed" type="text" data-field-name="points_on_deed">

<input  value="" name="price_per_point" id="price_per_point" type="text" data-field-name="price_per_point">

<input  value="" name="price" id="price" type="text" data-field-name="price">


<select name="mason_title_florida" data-field-name="mason_title_florida"
id="mason_title_florida" data-default-val="" 
required="required">
<option value="" selected="">Set Price...</option>
<option value="508">5000</option>
<option value="515">6000</option>
<option value="522">7000</option>
<option value="529">8000</option>
<option value="536">9000</option>
<option value="543">10000</option>
<option value="550">11000</option>
</select>