Load two table columns in dropdownlist (for calculations) but donly show one in view Jquery C#

Question

I loaded two columns in my dropdownlist for a unitofmeasure table. The reason being I wanted to use the unitvalue for calculated fields in view / product page. See image

Table and resulting dropdownlist

This was achived with the following code

:Table / Model

public partial class q_unitofmeasure
{
    [Key]
    public decimal q_measuretype { get; set; }

    public string q_unit { get; set; }

    public decimal? q_unitvalue { get; set; }

    //This property will bring back the concatenated value
    //if Unit is Kilograms and Value is 1
    //result will be Kilograms: 1
    public string UnitNameAndValue
    {
        get
        {
            return (q_unit + " : " + q_unitvalue);
        }
    }
}

 :Controller

  ViewBag.q_measuretype = new SelectList(db.q_unitofmeasure, "q_measuretype", "UnitNameAndValue", pagedProduct.SingleOrDefault().q_measuretype);

 :View

  @Html.DropDownList("q_measuretype", null, htmlAttributes: new { @class = "form-control"})

Now the issue is, I need to hide the unitvalue (digits) and only show the text in the view but still retain the digits for calculation purposes. Also I currently have an inefficient way of using the values for calculation by having if statements with the following script code

 if (document.getElementById('q_measuretype').value == 1) {
            var measureType = 1;
            var measureString = " / KG";
        }

and so on for each selected dropdown item. The reason why I say its 'inefficient' is if a user adds a new unit in the table for whatever reasons, then one has to come in to the view code and add to the if statements each time. [this is a secondary issue for now]

I would like to know how to hide the digits column in the dropdownlist while still keeping the calculations functioning.