如何在javascript中的一个选择下拉列表中显示所有父项和子项值 [英] How to show all parent and child values in one select dropdown in javascript

问题描述

大家好，我有一个主题表，我在其中存储所有主题以及子主题..和子主题ID，我将它们存储在parent_id列中.

Hi guys i have topic table where i am storing all topics along with sub topics..and subtopic id i am storing in parent_id column.

这是我的数据库结构:

Here is my db structure:

我正在像这样在下拉列表中找到所有主题.但是我想显示我的副主题列表

i am getting all topics in dropdown like this. But i would like to show my subtopics list like this

fractions 
fractions>introductions to fractions
fractions>Fractions as division

到目前为止，我已经在模型中创建了childTopics函数:

So far i have create childTopics functions in my model:

public function childTopics()
{
    return $this->hasMany(Topic::class, 'parent_id');
}

我在控制器的create函数中使用了这样的

And i used in my create function in controller like this:

 $topics = Topic::with('childTopics')->parent()->get(['id', 'name']);
   

这是我的ajax电话，我将所有主题集中显示在一个地方.

Here is my ajax call where i am showing all my topics in one place.

function getSubjectsTopics(subject_id)
{
    if(subject_id) {
        loading_show();
    axios.get("/master/topic/get-topic-by-subject-id/" + subject_id)
        .then(function(response) {
            var optionHtml = '<option value="0">Parent</option>';
            if(response.data.status) {
                $.each(response.data.subject_topics, function(i,v) {
                    optionHtml += `<option value="${v.id}">${v.name}</option>`;
                 });
            }

            $("#ddl_topic_type").html(optionHtml).attr('disabled', false).select2();
            loading_hide();
        })
        .catch(function(error) {
            loading_hide();
            console.log(error);
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Something went wrong!'
            })
        })
    } else {
        $("#ddl_topic_type").attr('disabled', true);
    }
}

在这个ajax调用中，我想显示带有父主题名称本身的子主题.

In this ajax call itself i would like to show my subtopics with parent topic name itself.

任何人都可以帮助我如何展示它.预先感谢.

Can anyone help me how can i show it. Thanks in advance.

这是我的回应输出

以下是根据主题获取主题的功能:

Here is functions to get topics based on subject:

public function getTopicsBySubjectID($subject_id)
{
    $topics = Topic::where("subject_id", $subject_id)->get(['id', 'name']);

    return response()->json(['status' => 'success', 'subject_topics' => $topics], 200);
}

推荐答案

您可以使用 optGroup 将子选项分组到一个组中，其中 optGroup 的名称为 subject name .您当前的 ajax响应会一起显示所有 subject_topics ，因此，如果第一个值 fractions 是主题名称，您可以将条件放入每个循环中，以检查 i (位置)是否为 0 ，然后附加 optgroup .

You can use optGroup to group your sub option in a group where optGroup will have the name of the subject name .Your current ajax response show all subject_topics together so if the first value fractions is subject name you can put condition inside each loop to check if i(position) is 0 then append optgroup.

演示代码 :

var response = {
  'data': {
    'status': 'success',
    'subject_topics': [{
      'id': 0,
      'name': 'fractions'
    }, {
      'id': 1,
      'name': 'fractions of booksss of subject'
    }, {
      'id': 2,
      'name': 'fractions of sub'
    }]

  }
};
var optionHtml = '<option>Select....</option>';
if (response.data.status) {
  $.each(response.data.subject_topics, function(i, v) {
    if (i == 0) {
      optionHtml += `<optGroup label="${v.name}">` //considering 1st id is subject name
    } else {
      optionHtml += `<option value="${v.id}">${v.name}</option>`;
    }
  });
  optionHtml += `<optGroup>` //close optgroup
}

$("#ddl_topic_type").html(optionHtml).attr('disabled', false).select2();

//or
var response = {
  'data': {
    'status': 'success',
    'subject': 'somesubjectname', //return subject name as well
    'subject_topics': [{
      'id': 0,
      'name': 'fractions'
    }, {
      'id': 1,
      'name': 'fractions of booksss of subject'
    }, {
      'id': 2,
      'name': 'fractions of sub'
    }]

  }
};
var optionHtml1 = '<option>Select....</option>';

if (response.data.status) {
  //append subject name
  optionHtml1 += `<optGroup label="${response.data.subject}">`
  $.each(response.data.subject_topics, function(i, v) {
    optionHtml1 += `<option value="${v.id}">${v.name}</option>`;
  });
  //subject name ..
  optionHtml1 += `<optGroup>`
}

$("#ddl_topic_type1").html(optionHtml1).attr('disabled', false).select2();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<select id="ddl_topic_type"></select>
<select id="ddl_topic_type1"></select>

这篇关于如何在javascript中的一个选择下拉列表中显示所有父项和子项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！