How to get selected option value and text in a modal when clicked on a table row

check out this:

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

@YASSINEQORAICHE - Alright, i will read on that for more

may consider create a vue modal component

https://laracasts.com/series/whatcha-working-on/episodes/32

@SIANGBOON - I am not actually into vue. am using jquery for my development. i don't know if i ca learn vue within a week so that i switch.

ask yourself if you are ready for this...

You need to populate the modal from either data elements on the table row, or via an ajax call.

The best approach depends on how many and what type of fields you need to edit compared to the original table row.

https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal

Check the answer by "LostInComputer"

I am able to pass all the data to the modal except the the select option. I am stack with how to pass the data for the select option.

In one statement you said table row, and another you said select option.

Which one are you actually working with.

Are you using TR click event.

Are you using Ajax to bring up the data to edit.

I am just confused on this option select what does it have to do with bringing up the record to edit.

The previously saved record's data is stored in the database.

Very sorry but the question made my head kind of spin.

Also if you are confused on how to show what was previously selected in a select option please search here as this has been covered several times.

Google

site:laracasts.com your search sentence

In fact I answered that very question just a few days ago.

i don't know if i ca learn vue within a week

Doing this in jQuery will also take a little while to learn.

You have a week and don't understand how to get a previously stored select option from the database.

You probably need to slow down and take a deep breath and just take some quality time to learn this stuff.

See: https://drive.google.com/file/d/0B1_PFw--3o74TC16eXRBYXZBNFk/view

Notice about midway the edit part.

The flow is:

• a div with display:none
• a click event triggers ajax, display:block, shows data
• click event to save data using ajax
• div is now display:none
• re-display the content of the original div content, your table with ajax

Just a short explanation, but I'd suggest you find and take some free or paid Jquery ajax tutorials.

It's hard to give months of learning in a forum thread.

Also note it's a master detail in example:

https://i.imgur.com/7l7DaPM.jpg

Very top is parent (master), table is children (invoice details).

@JLRDW

Are you using TR click event? - Yes

Are you using Ajax to bring up the data to edit? - Yes

This my table https://photos.app.goo.gl/WvF9VP4L48ADn2yn8

code:

<tbody>
    @foreach ($diagnosis as $diagnos)
    <tr id="edit" data-toggle="modal" data-target="#exampleModal">  
        <input type="hidden" id="id" value="{{$diagnos->id}}">
        <td>{{$loop->index + 1}}</td>
        <td>{{strtoupper($diagnos->diagnos_name)}}</a></td>
        <td data-cat={{$diagnos->diagnos_category_id}}>{{strtoupper($diagnos->diagnos_category_name)}}              </td>
        </tr>
    @endforeach
</tbody>

so when i click on the table row it opens up the edit form which is a modal.

The edit form: https://photos.app.goo.gl/rxyHfAGmtAjuXXcT8

exactly like in the video, how i can get the value in the select option.

kindly forgive me for being bored though.

https://laracasts.com/discuss/channels/laravel/how-to-show-default-value-in-select-option-parent-id

Value comes from db.

A basic example to get text and value from select.

<select id="myselect">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

$(function() {
    $('#myselect').on('change', function(e) {
        let value = $(this).val();
        let text = $('#myselect option:selected').text();

        console.log('value=' + value);
        console.log('text=' + text);
    });
});

So just throw that in the native bootstrap show.bs.modal event so you can retrieve it when the modal opens or whatever you're trying to do.

Hum, does OP need to get value, or is OP trying to place the existing stored value in the select option prior to editing.