Question

我试图弄清楚从option字段中选择某个select时如何在Webform页面上显示图像。然后，当选择其他option时，更改图像。 url图像链接与相应的select字段选项一起存储在Sqlite3数据库中。我很难将所有这些放在一起，并且想知道是否有人可以提供帮助。这是一些可使您更容易理解的代码。

我关注的select字段是Host字段，而extra类的Host部分是URL图像链接的存储位置。

class LoginForm(FlaskForm):
host = SelectField('Host Solution Required', choices = [], validators= . 
[validators.InputRequired('Please select a Board')])

@app.route('/', methods=['GET', 'POST'])
def form():
form = LoginForm()
form.device.choices = [(device.id, device.name) for device in 
Device.query.filter_by(cat=None).all()]
form.host.choices= [(host.id, host.name) for host in Host.query.all()]
#if form.validate_on_submit(): To use this I will have to figure out how 
to validate the choices for device
if request.method =='POST':
    device = Device.query.filter_by(id=form.device.data).first()
    host = Host.query.filter_by(id= form.host.data).first()
    #This code takes care of changing the format of the ordering link 
that is put into bugzilla.
    if host.name =='None' and form.cat.data == 'None':
        return '<h1> You did not order anything, please go back and fill 
out cat or host</h2>'
    elif host.name == 'None':
        return '<h1> ({} x {}) for {}</h1>'.format(form.number.data, 
device.name, form.team.data)
    elif form.cat.data == 'None':
        return '<h1> ({} x {}-{}) for {} . 
</h1>'.format(form.quantity.data, host.name, form.finish.data, 
form.team.data)
    else:
        return '<h1> ({} x {}-{}) AND ({} x {}) for {} . 
</h1>'.format(form.quantity.data, host.name, form.finish.data,
            form.number.data, device.name, form.team.data)
return render_template('form.html', form=form, street = host.extra)

class Host(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    customer = db.Column(db.Boolean())
    engineering = db.Column(db.Boolean())
    extra = db.Column(db.String(400))

@app.route('/host/<name>')
def host(name):
hosts = Host.query.filter_by(name = name).all()
hostArray = []

for host in hosts:
    hostObj = {}
    hostObj['id'] = host.id
    hostObj['name'] = host.name
    hostObj['extra'] = host.extra
    hostArray.append(hostObj)

return jsonify({'hosts':hostArray})

<br>
  {{form.host.label}}
  {{form.host}}
  <img src={{street}} alt = 'pic' align = 'right' width = '200' height = 
'200' />
<script>
var host_select = document.getElementById("host");
host_select.onchange = function() {
  name = host_select.extra;
  fetch('/host/' + name).then(function(response)){
    response.json().then(function(data)){
        for(host of data.hosts){
            document.getElementById("tweet").src= host.extra;
        }

    })
  });
}*/
</script>

上面的代码段不起作用，但是它是在HTML中显示图像的位置。如果可以进一步澄清，请告诉我。

如何根据选择字段中的选择值在网页上显示图像而无需重新加载页面

0 个答案: