CODEWITHSUNDEEP
javascriptphpjquerymysqllaravel
Kayelder
Kayelder

Reputation: 155

Onchange dropdown selecting

Fellow Coders,

I have 2 dropdown menu's in which the first one contains a list of companies. And the other one contains a list of tasks. What I need to do now is to get the corresponding tasks linked to the company_name (project ID).

So in short. If I open the dropdown and select a company (project_ID). I need the tasks (subproject_ID) linked to that project.

Also, if one specific company has been chosen then the second dropdown should also have the corresponding tasks BUT a new field has to be added in the row that adds my data to the database called note.

If anyone has some sort of an idea how I could do this. that would be greatly appreciated. I also linked some of the table prints in my other question for reference.

Inner Join laravel 5.2

Upvotes: 0

Views: 2576

Answers (1)

Mozammil
Mozammil

Reputation: 8750

Based on your previous questions, this could do the trick

<select name="project_id">
    <option value="{{ $data->project_id }}">{{ $data->company_name }}</option>
</select>

<select name="subproject">
    <option value="{{ $data->subproject_id }}" data-project="{{ $data->project_id }}">{{ $data->title }}</option>
</select>

<textarea name="note" style="display: none" disabled></textarea>

<script>
$("select[name='project_id']").on('change', function()
{
    var project_id = $(this).value;
    $("select[name='subproject'] > option[data-project != "+ project_id +"]").hide();

    if(project_id == 1)
    {
        var note = $("textarea[name='note']"); 
        note.show();
        note.prop("disabled", false); 
    }
})
</script>

You have the two dropdowns. The second dropdown's option contains another data-attribute that will specifiy the project id and based on that you can either hide/show the option values you want. The ideal solution is to use AJAX and get the appropriate values but this should work too.

You just need to bind to the onchange event on the first dropdown and do some logic (based on the project id) to hide the value of the options you don't need in the second dropdown.

To add the note field, you can do the same. If the project_id matches the company that you need, you can enable the textarea that you want.

I hope this answers your questions.

Upvotes: 1

Related Questions