代码

Question

是否可以在视图中追加数据而不向后端发送任何数据？

我有一个带有静态值的静态选择框（数据库中没有），我想当我选择特定选项时显示更多字段，而对于其他选项则隐藏那些字段。 有可能吗？

代码

import numpy as np
import cv2
from openni import openni2
from openni import _openni2 as c_api

openni2.initialize("./Redist")
device = openni2.Device.open_any()

ir_stream = device.create_ir_stream()
ir_stream.set_video_mode(c_api.OniVideoMode(pixelFormat = c_api.OniPixelFormat.ONI_PIXEL_FORMAT_GRAY16, resolutionX = 320, resolutionY = 240, fps = 30))
ir_stream.start()

while(True):
    frame = ir_stream.read_frame()

    # returns a 1-dim c_ushort_array of len: 76'800 = 320x240 each pixel having an uint16 value 0..65535
    frame_data = frame.get_buffer_as_uint16()

    # converting to numpy.ndarray which is still 1-dimension only
    img = np.frombuffer(frame_data, dtype=np.uint16)

    # convert to 3-dimensional array
    img.shape = (240, 320)

    # normalize values 
    img = img.astype(np.float) / 1024

    # Display image
    cv2.imshow("image", img)

    # Wait for input
    if cv2.waitKey(1) & 0xFF == ord('q'):
        cv2.destroyAllWindows()
        break

ir_stream.stop()
openni2.unload()

<select name="style" id="style" class="chosen-select"> <option value="">-- Select --</option> <option value="default">Default</option> <option value="about-one">About Style 1</option> <option value="about-two">About Style 2</option> <option value="contact-one">Contact page without form</option> <option value="contact-two">Contact page with form</option> <option value="faq">Faq</option> <option value="services">Services</option> </select> //new fields here <div class="col-md-12 mt-10" id="details"></div>

JavaScript

PS：不确定我根本不需要Ajax吗？！请与我分享您的想法。

Answer 1

我看不到Ajax的用法，也许您有理由，但是除非您需要服务器中的数据，否则请尝试此操作。

var Style ='contact-two'在if语句中不执行任何操作，if仅检查它是否不为null。将字符串与带有this.value

的选择值进行比较

$(document).ready(function() {
  $('select[name="style"]').on('change', function(f) {
    $('#details').empty();
    if (this.style == 'contact-two'){
      $('#details').empty();
      $('#details').append('<p>Here will be appended inputs</p>');
    } else {
      $('div#details').empty();
    }
  });
});

Answer 2

您不需要Ajax。只需操作要更改的元素的innerHTML。

var dropdown = document.getElementById('style')
var details = document.getElementById('details')
dropdown.onchange = (event) => {
  var selected = event.target.value

  if (selected == 'contact-two') {
    details.classList.remove('hidden')
    details.innerHTML = "<div>whatever html you want</div>"

  } else {
    details.innerHtml = "hi"
  }
}

<select name="style" id="style" class="chosen-select">
  <option value="">-- Select --</option>
  <option value="default">Default</option>
  <option value="about-one">About Style 1</option>
  <option value="about-two">About Style 2</option>
  <option value="contact-one">Contact page without form</option>
  <option value="contact-two">Contact page with form</option>
  <option value="faq">Faq</option>
  <option value="services">Services</option>
</select>

<div class="col-md-12 mt-10" id="details">Hi</div>

通过ajax追加没有数据的字段

代码

2 个答案: