أخذ القيمة وإنشاء عامل تصفية من حقل الإدخال؟

0

كيفية أخذ النص من الخيارات المحددة ولفه في div وإلحاق ذلك div بالخيار مع classendElements؟ هنا هو jsfiddle https://jsfiddle.net/2w5dp7vk/14/ أحاول إضافة عامل تصفية عند تحديد خيار أو عند كتابة شيء ما في حقل الإدخال. أريد أن أكون قادرًا على أخذ القيمة من الإدخال أو تحديد الخيار ولف تلك القيمة في علامة div وإلحاقها على .appendElements عند النقر فوق الزر "تم". 

<div class="appendElements"></div>

<div class="searchFilter">
    <select class="selectpicker" data-live-search="true">
        <option value="all">All</option>
        <option value="published">Published</option>
        <option value="draft">Draft</option>
        <option value="in-review">In Review</option>
        <option value="deleted">Deleted</option>
    </select>
</div>

2 الاجابة

0

أولاً ، يجب إرفاق ملف change حدث لاختيار èlement .searchFilter ، ثم عندما يتغير المستخدم عليك الحصول على نص الخيار المحدد باستخدام $('.searchFilter option:selected').text() وإرفاقه بقسم الإخراج الخاص بك .appendElements ، مثل:

اقتراح مسج: 

var selectElement = $('.selectpicker');

selectElement.on('change', function() {
  var selected_option_text = selectElement.find('option:selected').text();

  $('.appendElements').text(selected_option_text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="searchFilter">
  <select class="selectpicker" data-live-search="true">
    <option value="all">All</option>
    <option value="published">Published</option>
    <option value="draft">Draft</option>
    <option value="in-review">In Review</option>
    <option value="deleted">Deleted</option>
  </select>
</div>

<br>
<div class="appendElements"></div>

اقتراح VanillaJS: 

var selectElement = document.querySelector('.selectpicker');

selectElement.addEventListener('change', function() {
  var selected_option_text = selectElement.selectedOptions[0].text;
  document.querySelector('.appendElements').textContent = selected_option_text;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="searchFilter">
  <select class="selectpicker" data-live-search="true">
    <option value="all">All</option>
    <option value="published">Published</option>
    <option value="draft">Draft</option>
    <option value="in-review">In Review</option>
    <option value="deleted">Deleted</option>
  </select>
</div>

<br>
<div class="appendElements"></div>

:مؤلف
مشاركة الرابط
0

يمكنك الحصول على قيمة التحديد عند تغييره وتعيينه على أنه textContent من div الذي تريد عرض قيمة التحديد فيه. 

<div class="searchFilter">
        <select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
            <option value="all">All</option>
            <option value="published">Published</option>
            <option value="draft">Draft</option>
            <option value="in-review">In Review</option>
            <option value="deleted">Deleted</option>
        </select>
    </div>
    <p/>
<div id="result"></div>
<script>
function showChanges(){
  document.getElementById("result").textContent = document.getElementById("selectpicker").value;
}
</script>

مسج: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
            <select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
                <option value="all">All</option>
                <option value="published">Published</option>
                <option value="draft">Draft</option>
                <option value="in-review">In Review</option>
                <option value="deleted">Deleted</option>
            </select>
        </div>
        <p/>
    <div id="result"></div>
    <script>
    function showChanges(){
      $('#result').text($('#selectpicker').val());
    }
    </script>

:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
فوق
قائمة طعام