代码之家 › 专栏 › 技术社区 › Lynob

ChosenJs动态更改默认选项

jquery-chosen jquery php javascript

Lynob · 技术社区 · 8 年前

我有一个选择元素

  <select class="form-control position" name="position">
  <option value="" selected disabled hidden>Pick A Position</option>  
<?php
  $option = 0; 
foreach ($jsonIterator as $key => $val) {
      if(is_array($val)) {
        $option++
 ?>
   <option value="<?  echo $option; ?>"><?  echo $key; ?></option>  
 <?php }}?>   
</select>

我有3个按钮,它们分别有值1、2和3

<button type='button' value='1' class='btn-primary pull-left apply'>Apply</button>

我有以下JS

<script>$(document).ready(function () {
    $('.position').chosen();
    $(".apply").click(function () {
        var id = $(this).val();
        $('html,body').animate({ 
          scrollTop: $("#contact").offset().top }, 'slow');
        $.ajax
            ({
                type: "POST",
                url: "contact.php",
                data: id,
                cache: false,
                success: function (html) {
                    $(".positon").val(id).trigger('chosen:updated');
                }
            });
          })
    });

当我点击一个按钮时,ChosenJs的默认选项没有改变

1 回复 | 直到 8 年前

Anfath Hifans 8 年前

更新选项值,

HTML

<select class="form-control position" name="position">
  <option value="" selected disabled hidden>Pick A Position</option>  
<?php $option = 0; foreach($jsonIterator as $key => $val){ ?>
    <?php if(is_array($val)){ $option++; ?>
   <option value="<?= $option; ?>"><?= $key; ?></option>  
 <?php }}?>   
</select>

并将select值传递给ajax,

jQuery

$(function(){
    $('select[name="position"]').chosen();
    $(".apply").click(function () {
        var id = $(this).val();        
        $('html,body').animate({ scrollTop: $("#contact").offset().top }, 'slow');      
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: { id : id },
            cache: false,
            success: function (html){
                $('select[name="position"]').val(id).trigger("chosen:updated");
            }
        });
    });
});

演示: https://jsfiddle.net/03Lxkoaz/30/