laravel how to update the selected value from selection immediately

Question

I am working on a laravel project, I wanna create a selection that the selected value updated immediately when I click the selection, here is the markup:

   <select name="survey_option", id="survey_option" class="flex space-x-3 items-center">
                 
          <option value="NoLink" disabled>Please select</option>
          <option value="option 1">option 1</option>
          <option value="option 2">option 2</option>
                 
   </select>

here is the script:

<script>
survey_option=$('select[name=survey_option]').val();
</script>

here is the api:

$selected_label = $request->survey_option;

current result is that I can make a selection, but the selected value cannot be updated immediately after I click the selection. Can you plese help me to figure it out? Many THX!

Answer 1

The <div> tag should not be present within the <select>.

<select name="survey_option" id="survey_option">
   <option value="NoLink" disabled>Please select</option>
   <option value="option 1">option 1</option>
   <option value="option 2">option 2</option>
</select>

To achieve this, you should attach an change event listener to the select element:

$(document).ready(function() {
    $('select[name=survey_option]').on('change', function() {
        var survey_option = $(this).val();
        console.log(survey_option);
        // your codes
    });
});

you can check console to make sure that you get correct option value in function