AJAX / JS：所选项目的自动提交和php回显值答案

【问题标题】：AJAX/JS: Auto submit and php echo value of selected itemAJAX / JS：所选项目的自动提交和php回显值
【发布时间】：2012-07-29 21:16:41
【问题描述】：

我目前正在使用 AJAX/JS 来自动提交表单。该功能适用于文本输入字段，但不适用于选择框。有没有办法让 JS 函数回显所选项目的值？ EXAMPLE

AJAX/JS 提交功能

<script>
     $(document).ready(function() {
         var timer = null; 
         var dataString;   
         function submitForm(){
           $.ajax({ type: "POST",
                    url: "test1.php",
                    data: dataString,
                    success: function(result){

                    $('#condition_input').text( $('#resultval', result).html()); 

                    }

           });
           return false;
         }

         $('#condition').on('keyup', function() {
            clearTimeout(timer);
            timer = setTimeout(submitForm, 1000);
                  var condition = $("#condition").val();
            dataString = 'condition='+ condition;
            });
     });
    </script>

HTML/PHP

if (isset($_POST['condition'])){
    $condition = $_POST['condition'];   
    echo ('<div id="condition"><span id="resultval"><h2>Description:</h2>'.$condition.'</span></div>');
}

    <select name="condition" id="condition" value="<? $condition ?>" >
        <option value=""></option>
            <option value="new">New</option>
        <option value="used">Used</option>
        <option value="not Working">Not Working or for parts</option>
    </select>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

你必须绑定"on change"-event:

$('#condition').on('keyup change', function() {
  // ...
}

而且您的标记不正确。您不能在选择元素上设置值属性。要选择正确的值，您必须遍历选项并通过设置属性“selected”来标记正确的值：

<?php

// ...

$options = array(
  '' => '', 
  'new' => 'New',
  'used' => 'Used',
  'not_working' => 'Not Working or for parts',
);
?>

<select name="condition" id="condition" >
<?php foreach ($options as $optionValue => $optionText): ?>
    <option value="<?php echo $optionValue ?>" <?php echo $condition == $optionValue ? 'selected="selected"' : null ?>><?php echo $optionText ?></option>
<?php endforeach ?>
</select>

【讨论】：