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

AJAX/JS: Auto submit and php echo value of selected item

本文关键字：选项 项目 php JS 提交 AJAX      更新时间：2024-05-06

我目前正在使用AJAX/JS来自动提交表单。该函数与文本输入字段配合良好，但与选择框配合不好。有没有办法让JS函数回显所选项目的值？示例

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>

您必须绑定"on change"-事件：

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

并且您的标记不正确。不能在select元素上设置值属性。要选择正确的值，您必须循环选择选项，并通过设置属性"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>
相关文章：