Question

我已经在我的办公室工作了这个网站，并且在主要下拉列表中进行选择后，页面的规格要求我显示下拉列表。

基本上，当一个人选择＆＃34;用户＆＃34;在下拉列表1中，下拉列表2应显示一个用户列表。

我已经创建了实际的下拉菜单，我在第一个选择后第二个应该出现的部分出现问题。

<div>
@include('orders.dropdown', ['field_name' => 'select_user' ,'default_value'=> null ,'drop_down_list' =>$groups, 'form_index' => 0, 'display_name' =>  trans('notifications.select_user') ])
</div>

<div class= "hidden" id= "single_user_hidden_dropdown">
@include('orders.dropdown', ['field_name' => 'select_single_user' , 'default_value'=> null,'drop_down_list' =>$customer_drop_down, 'form_index' => 0, 'display_name' =>  trans('notifications.select_single_user') ])
</div>

以上是我在所述页面上使用的代码示例。任何人都可以帮助我吗？

Answer 1

试试这个javascript片段

$('#drop_down_1_id').on('change', function() {
  if($(this).val() == 'users') {
    $('#single_user_hidden_dropdown').removeClass('hidden')
  } else {
    $('#single_user_hidden_dropdown').addClass('hidden')
  }

})

请勿忘记将drop_down_1_id替换为您第一个选择框的ID 和 ($(this).val() == 'users')显示或隐藏其他选择框的逻辑

$(this).val()会为您提供当前所选选项的值。

希望这会有所帮助。如果您仍然遇到任何问题，请告诉我

Answer 2

您可以使用{!!通过laravel刀片助手加载您的收藏品！}。完成后，您可以按照以下代码来实现您正在寻找的内容。如果您需要帮助，请随时提出进一步的问题。

＆＃13;

var HarryPotterCollection = ['Harry Potter and the Philosopher\'s Stone','Harry Potter and the Chamber of Secrets','Harry Potter and the Prisoner of Azkaban','Harry Potter and the Goblet of Fire',
'Harry Potter and the Order of the Phoenix','Harry Potter and the Half-Blood Prince','Harry Potter and the Deathly Hallows'];

var StarWarsCollection = ['A New Hope','The Empire Strikes Back','Return of the Jedi','The Phantom Menace','Attack of the Clones','Revenge of the Sith','The Force Awakens','The Last Jedi',
'The Light Calls'];

var select = document.getElementById('select');
var secondSelect = document.getElementById('second-select');

select.addEventListener('change', function() {

  // show second select and empty results
  secondSelect.style.display = 'block';
  secondSelect.innerHTML = '';
  
  // append each film into the select from collection
  window[this.value].forEach(function(film) {
    secondSelect.innerHTML += '<option>' + film + '</option>';
  });
  
});

＆＃13;

<select id="select">
  <option selected disabled>Please select a film</option>
  <option value="HarryPotterCollection">Harry Potter</option>
  <option value="StarWarsCollection">Star Wars</option>
</select>

<select id="second-select" style="display: none"></select>

＆＃13;

如何使用JS显示辅助下拉列表

2 个答案: