Question

我有这个show / hide div。我遇到了几个问题。我顺便使用CodeIgniter。

首先：当我选择房地产时，div显示。但如果我选择服务，房地产div将不会隐藏。（服务没有div）。

第二：如果我选择房地产并填写表格，我改变主意并选择汽车并填写表格，然后发送到数据库，我从实时获得所有字段房地产和汽车进入我的数据库。这不是我想要的。

第三：如果我想添加更多类别和更多div显示/隐藏，是否有不同的方法？

<select id="catid_1" name="catid_1">
<option value=""></option>
<option value="5">Real-Estate</option>
<option value="8">Automobile</option>
<option value="10">Service</option>
</select>
<!--Auto-->
<div id="8" class="forms">
 Energie :
 <select name="energy">
     <option></option>
     <option value="Gasoline">Gasoline</option>
     <option value="Diesel">Diesel</option>
     <option value="GPL">GPL</option>
     <option value="Electric">Electric</option>
     <option value="Hybrid">Hybrid</option>

 </select><br />

 Transmission :
 <select name="tans">
 <option></option>
 <option value="Manuel">Manuel</option>
 <option value="Automatic">Automatic</option>
 </select><br />

 Miles :
 <input type="text" name="mile"/><br />
 Year :
 <input type="text" name="year"/><br />


</div>

<!--Realestate-->
<div id="5" class="forms">
   Room :
   <input type="text" name="room"/><br />
   Surface :
   <input type="text" name="surface"/><br />
</div>

<!--End Tech-->


$(function() {
    $(".forms").hide();
    $("#catid_1").change(function() {
    var e = $(this).val();
    if(e == '8' || e == '5') {
    $(".forms").hide().parent().find('#' + e).show().addClass('form-active');
    }
});

// Bind to the submit
$('#submit').click(function(e){
    e.preventDefault();

    // Parse the data only for the displayed div.
    var resolve_data = function() {
        var output = {};
        // Here you place the acceptable fields.
        $('.form-active input, .default input').each(function() {
            output[$(this).attr('name')] = $(this).val();
        });
        return output;
    };

    // Submit the form here.
    $.ajax({
      url: '/echo/json/',
      type: 'POST',
      dataType: 'json',
      data: resolve_data(),
      beforeSend: function(xhr, settings){
        // Before sending, check the data.
        alert(settings.data);
      },
      complete: function(xhr, textStatus) {
        //called when complete
      },
      success: function(data, textStatus, xhr) {
        //called when successful
      },
      error: function(xhr, textStatus, errorThrown) {
        //called when there is an error
      }
    });
 });

 });

Answer 1

首先：service显示/隐藏无法正常工作，因为您要对ID进行条件限制：

if(e == '8' || e == '5') { // <<-- remove this conditional
$(".forms").hide().parent().find('#' + e).show().addClass('form-active');
}

秒：当您进行更新时，请检查下拉框的值，并仅更新属于该选项的字段。您的表单应该与选项的值一起发送，因此不难做到。例如，如果select值为5，则只更新数据库中的room和surface字段。在切换选择时不要尝试清除表单，在后端执行此操作会更安全。

如果你坚持做前端，在那里放一个实际的表格，并在更改选项时.reset()。

第三：可能，但这似乎没关系？你不满意吗？

http://jsfiddle.net/zf9BN/1/

显示/隐藏div将所有数据发送到数据库

1 个答案: