Как определить функцию onclick для Laravel Collectives? - PullRequest
Новая
       2

Как определить функцию onclick для Laravel Collectives?

1 голос
/ 26 апреля 2020

Я реализовал раскрывающийся список, используя Laravel коллективы. Мне нужно звонить function setMaterialValue(let x){ console.log(x)} каждый раз, когда я выбираю материал. Это должно быть указано c для каждого материала как хлопок-10, wetlook-20, крокодил-30 и др. c. Без Laravel коллектива это может быть выполнено как 

<option onclick="setMaterialValue(10);">Cotton</option>

Как выполнить это с использованием Laravel коллектива?

enter image description here

Мой код выглядит следующим образом: 

<div class="card">
    <div class="card-header"><h2 class="card-title m-0">Feature Selector</h2></div>
    <div class="card-body">

        <h5 class="card-title"><b>Material Selector</b></h5>
        <div class="row">
            <div class="col-md-6">
                Textile Material
            </div>
            <div class="col-md-6">
                {{Form::select('material_selector', [
                        '10' => 'Cotton', 
                        '20' => 'Wet Look',
                        '30' => 'Crocodile',
                    ], null, ['placeholder' => 'Select Material'],['class'=>'form-control'])
                }}
            </div>
        </div>
        <hr>

    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Вы, вероятно, должны использовать jQuery. Затем вы можете обратиться к вашему элементу выбора следующим образом 

$(document).ready(function() {
  $('.form-control[name="material_selector"]').on('change', showSelectedValue);
  
  function showSelectedValue(event) {
    var target = $(event.target);
    console.log(target.val() + " = " + target.find('option:selected').text());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="material_selector" class="form-control">
  <option value="10">Cotton</option>
  <option value="20">Wet Look</option>
  <option value="30">Crocodile</option>
</select>

Другой вариант

Если вы действительно не хотите использовать jQuery, попробуйте использовать onChange атрибут для тега select, как в примере ниже 

{{Form::select(
    'material_selector', // name attribute of the select
    ['10' => 'Cotton', '20' => 'Wet Look', '30' => 'Crocodile'], // option values
    null, // selected value, for example '20'
    ['placeholder' => 'Select Material', 'class' => 'form-control', 'onChange' => 'showSelectedValue(this)'], // attributes for <select>
)}}


 function showSelectedValue(element) {
 	console.log(element.value + " = " + element.options[element.selectedIndex].text);
 }
<select name="material_selector" class="form-control" onChange="showSelectedValue(this)">
  <option value="10">Cotton</option>
  <option value="20">Wet Look</option>
  <option value="30">Crocodile</option>
</select>
0 голосов
/ 26 апреля 2020

К вашему сведению - где ваше объявление класса добавить его и любые другие атрибуты html там же: 

{{  Form::select('material_selector', 
    [
        '1' => 'Cotton', 
        '2' => 'Wet Look',
        '3' => 'Crocodile',
    ], 
    null, 
    ['placeholder' => 'Select Material'],
    [
        'class'=>'form-control',
        'onclick'=>'setMaterialValue(10)' // <== ADD IT HERE
    ])
}}
...