从 select 框中获取所选值

Question

I have a problem when I want to show the type of input from the select element

This is the select element in my view

<select id="type" name="type_id" class="form-control" required>
    @foreach($type as $row)
    <option value="{{$row->id}}">{{$row->label}}</option>
    @endforeach
</select>

If the user selects the type of question number they got the type of their input number, if they select string they get the type of the input string for example

<h4 class="card-title"  id="rep">Reponse : {{$i + 1}}</h4>
<input type="text"  id="rep_for_oui" required class="form-control" placeholder="Reponse question {{$i + 1 }}" name="rep_{{$i}}" />
<input type="text" id="rep_for_string" required class="form-control" placeholder="Reponse question {{$i + 1 }}" name="rep_{{$i}}" />
<input type="number"  id="rep_for_number" required class="form-control" placeholder="Reponse question {{$i + 1 }}" name="rep_{{$i}}" />

And this is my Javascript

$('#rep').hide();
$('#rep_for_oui').hide();
$('#rep_for_string').hide();
$('#rep_for_number').hide();
var e = document.getElementById("type_id");
var value = e.options[e.selectedIndex].value;
$('#type').onchange(function () {
    alert(value);
    if (value == "2") {
        $('#rep').show();
        $('#rep_for_oui').show();
    }
});

Answer 1

Instead of:

var e = document.getElementById("type_id");

Do the following:

var e = document.getElementById("type");

Answer 2

For getting Selected Value you can use like

For me,

var selectedType = $('#type').val()

returned null.

I had to use

var selectedType = $('#type option:selected').val()