如何同时获得选择框的文本和值并将其存储到数据库中？

Question

I'm trying to store the text and value of the select box i have into my database. I can properly store the value by requesting it from the select box name itself but I'm having troubles with storing the text. I have 2 tables namely Item and ItemOrder.

Item Table

id | name

ItemOrder Table

id | item_id(fk from item table) | item_name

HTML

<select name="item" class="form-control select2" id ="item">
    <option value="0" selected="true" disabled="true">Select Item</option>
     @foreach($items as $key => $i)
        <option value="{!!$key!!}">{!!$i!!}</option>
     @endforeach
</select>

ItemController

public function itemList()
{
  $items = Item::lists('name', 'id');
  return view('employee.itemList', compact('items'));
}
public function storeItem(Request $request){
    $info = array( 'item_name'=>$i,
      'item_id'=>$request['item'],
    DB::table('itemOrder')->insert($info);
  return redirect()->route('dashboard');
}

Routes

Route::get('itemList', ['as' => 'itemList',
        'uses' => 'ItemController@itemLIst']);
Route::post('storeItem', ['as' => 'storeItem',
        'uses' => 'ItemController@storeItem']);

JS

$('select[name="item"]').on('change', function () {
 var e = document.getElementById("item");
 var itemText = e.options[e.selectedIndex].text;
 console.log(itemText);
});

I can store the item_id value on my database cause i set item_name to nullable for the meantime. I tried to get the text through javascript and i can display it with console.log. Can anyone help me with storing the selected text as well? Or is there a way to get the text through javascript or jquery?

Answer 1

Did you tried to use

"<option value=" 

to hold each option's text? That way you can retrieve selected option text instead of some numeric code.

Answer 2

Follow my code.

$(document).ready(function () 
{
  $('select[name="item"]').on('change', function () 
  {
  alert('Value change to ' +$(this).attr('value')+$(this).text());
   });
 });