时间戳

首页 > 解决方案 > 如何在javascript中的一个选择下拉列表中显示所有父值和子值

javascript - 如何在javascript中的一个选择下拉列表中显示所有父值和子值

问题描述

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

这是我的数据库结构： 在此处输入图像描述

我正在像这样的下拉列表中获取所有主题。但我想像这样显示我的子主题列表

fractions 
fractions>introductions to fractions
fractions>Fractions as division

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

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

我在控制器中的创建函数中使用了这样的：

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

这是我的 ajax 调用，我在一个地方显示我的所有主题。

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 调用本身中，我想用父主题名称本身显示我的子主题。

任何人都可以帮助我如何展示它。提前致谢。

编辑：这是我的响应输出 在此处输入图像描述

以下是根据主题获取主题的函数：

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

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

标签： javascriptajaxlaravel-7

解决方案

您可以使用optGroup将您的子选项分组到一个组中，该组optGroup将具有subject name.Your 当前ajax response显示的名称，subject_topics因此如果第一个值fractions是主题名称，您可以将条件放入each循环中以检查i(position) 是否为0append 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>

推荐阅读