當一個multiselect的選擇選項添加另一個字段使用jquery

我怎樣才能創建另一個領域的形式每次選擇一個新的選項，這個領域的每個名稱隨選項的值改變，我試過了，我得到的是長度和多值選擇當一個multiselect的選擇選項添加另一個字段使用jquery

<select class="form-control select2 quality" multiple="multiple" name="quality[]" data-placeholder="Select a Quality" style="width: 100%;"> 
    @foreach($quality as $quali) 
     <option value="{{$quali->id}}">{{$quali->quality_name}}</option> 
    @endforeach 
</select>

來源

2017-01-30 Mohamed Magdy Elbadrawy

你有沒有嘗試任何使用jQuery嗎？只需在Jquery中寫一個事件類型變化的方法。看到https://api.jquery.com/change/ – webDev

是的，我嘗試過，但我不知道如何改變每個領域創建的名稱 –

哦，有你，我會在一段時間後爲你發佈的東西 – webDev

我沒有得到這場的每個名稱與部分的選項的值更改。但實際上，在這裏，我嘗試收聽select2提供的change事件。然後使用:selected通過jQuery的僞選擇器查找所選值，以查找哪些選定選項的值和文本。

希望你有一些想法！

$(function() { 
 
    // Apply select2 
 
    $('.select2').select2() 
 
    
 
    // Just a small helper 
 
    var _h = { 
 
    capitalize: function (str) { 
 
     return str.charAt(0).toUpperCase() + str.slice(1) 
 
    }, 
 
    render: function (id, name) { 
 
     var html = '' 
 
     
 
     $.each([1, 2, 3], function (k, v) { 
 
     html += '<input type="text" name="quality[' + name + '][' + id + '][' + v + ']" placeholder="' + _h.capitalize(name) + '-' + v + '" class="block">' 
 
    }) 
 
     
 
     return html 
 
    } 
 
    } 
 
    
 
    // Now listed to change event of select2 
 
    $(document).on('change', '.quality', function() { 
 
    $('#append').html('') // truncate any appended nodes 
 
    
 
    $(this).find(':selected').each(function (k, v) { 
 
     $('#append').append(_h.render($(this).val(), $(this).text())) 
 
    }) 
 
    }) 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<style> 
 
.block { 
 
    display: block; 
 
    margin: .5rem 0; 
 
    width: 100%; 
 
} 
 
</style> 
 

 
<select class="form-control select2 quality" multiple="multiple" name="quality[]" data-placeholder="Select a Quality" style="width: 100%;"> 
 
    <option value="1">Standard</option> 
 
    <option value="2">Outstanding</option> 
 
    <option value="3">Whatever</option> 
 
</select> 
 

 
<div id="append"></div>

來源

2017-01-30 06:53:58 Chay22

這是完全有幫助的，thx –

那麼，根據我的示例情況，您必須創建另一個函數，它會像'render'函數一樣返回字符串dom /模板。 – Chay22

當一個multiselect的選擇選項添加另一個字段使用jquery

回答

相關問題