How to Post Select option words Not value-CodePudding

I have select option which sent value to an input i have to POST them both "select" and "input" value

the input value POST good but in select i need to POST words "test" not selected value

the problem that i got only the value of select when i using method POST to POST data

Need a way in select field to posting test1 test2 etc not value because the value already given to the input and posted

<script type="text/javascript">//<![CDATA[

$(document).ready(function(){
    $( "#st" ).change(function() {

var ww = $( "#st" ).val();
                alert(ww);
        $( "#usr" ).text(ww);
});
});


  //]]></script>

<input type="text" id="usr" name="usr" required="">


 <select id="st" name="st" onChange='document.getElementById("usr").value = this.value' required="">
  <option disabled selected>Select a category *</option>
  <option value="BXV0110YL">test1</option>
  <option value="THE440XYK">test2</option>
  <option value="ZXSA012YF">test3</option>
  <option value="UIY5411YU">test4</option>
  <option value="PE44750YX">test5</option>
  <option value="HSSX0125X">test6</option>
  <option value="HGGF0121D">test7</option>
  <option value="EXC9023DS">test8</option>
  <option value="K014VXC9M">test9</option>
  <option value="ELOOE01VW">test10</option>
  <option value="CPOIT012N">test11</option>
  <option value="ELOOE11VQ">test12</option>
</select>

CodePudding user response：

You could do this:

$(document).ready(function(){
    $( "#st" ).change(function() {
        $( "#usr" ).val($(this).find('option:selected').data('value'));
    });
    $('form').on('submit', function(e) {
        e.preventDefault();
        console.log($(this).serialize())
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" id="usr" name="usr" required="">


 <select id="st" name="st" required="">
  <option disabled selected>Select a category *</option>
  <option data-value="BXV0110YL">test1</option>
  <option data-value="THE440XYK">test2</option>
  <option data-value="ZXSA012YF">test3</option>
  <option data-value="UIY5411YU">test4</option>
  <option data-value="PE44750YX">test5</option>
  <option data-value="HSSX0125X">test6</option>
  <option data-value="HGGF0121D">test7</option>
  <option data-value="EXC9023DS">test8</option>
  <option data-value="K014VXC9M">test9</option>
  <option data-value="ELOOE01VW">test10</option>
  <option data-value="CPOIT012N">test11</option>
  <option data-value="ELOOE11VQ">test12</option>
</select>
<input type="submit" />
</form>