html - 如何为慈善网站设置搜索选项

Question

我想知道你是否可以帮助我，我是一名平面设计师，但具有超基础的 HTML 经验。

我在伯明翰的一家小型慈善机构做志愿者，他们希望创建一个社区规划工具，我说我会尝试帮助设计它，当然是免费的。

网站上的主要选项之一是人们可以通过搜索来获取资源。这是界面:

有没有一种非常简单的方法可以将其联系起来？例如，如果有人在下拉菜单中单击“Balsall Heath Ward”，然后单击“社区”，然后单击“立即搜索”，它将把他们带到 BHcommunity.html，其中将包含资源。同样，如果有人单击“Moseley Ward”，然后单击“Sustainability”，然后立即搜索，他们会转到 MWsustainability.html。这有意义吗？

基本上我只需要一些命令指向链接，但我不知道从哪里开始，任何人都可以给我一些建议或帮助吗？

如果有人能帮助我，我可以换取免费的设计支持吗？

非常感谢您的支持!

纳特

Ps:代码如下

<h3 class="demo-panel-title">Fill out the relevant information:</h3>
<div class="col-xs-3"> <div class="form-group has-error"> <input type="text" value="" placeholder="What is your name?" class="form-control" /> </div> </div>
<div class="col-xs-3"> <div class="form-group has-success"> <input type="text" value="" placeholder="What is your email address?" class="form-control" /> <span class="input-icon fui-check-inverted"></span> </div> </div>
<div class="col-xs-3"> <div class="form-group"> <input type="text" value="" placeholder="What organisation are you associated with?" class="form-control" /> </div> </div>
<br/>
<div class="col-xs-3"> <h3 class="demo-panel-title">Which Ward do you want to explore?</h3> <select class="form-control select select-primary" data-toggle="select"> <option value="0">Moseley & Kings Heath Ward</option> <option value="1">Balsall Heath Ward</option> </select> </div>
<br/> <div class="col-xs-3"> <h3 class="demo-panel-title">What data do you need?</h3> <select class="form-control select select-primary" data-toggle="select"> <option value="0">Choose one</option> <option value="1">Local economy</option> <option value="2">Transport</option> <option value="3">Leisure</option> <option value="4" selected>Housing</option> <option value="5">Community</option> <option value="6">Planning</option> <option value="7">Sustainability</option> </select> </div> <br/>

我需要添加一种搜索方式

Answer 1

我整理了一个相当简单的示例来说明如何执行此操作，链接如下。首先，我稍微修改了您的 HTML，将选项的值属性更改为更具描述性。我已经为元素添加了一些 ID，以便于定位而不需要 jQuery，正如您在此处的小摘录中看到的那样:

<div class="col-xs-3"> 
  <h3 class="demo-panel-title">What data do you need?</h3> 
  <select id="data-type-select" class="form-control select select-primary" data-toggle="select"> 
    <option value="0">Choose one</option> 
    <option value="economy">Local economy</option> 
    <option value="transort">Transport</option> 
    <option value="leisure">Leisure</option> 
    <option value="housing" selected>Housing</option> 
    <option value="community">Community</option> 
    <option value="planning">Planning</option> 
    <option value="sustainability">Sustainability</option> 
  </select> 
</div> 

在 javascript 中，我尽量保持简单，希望您能看到我是如何收集信息并使用它来选择您想转到的 html 文件的。

(function() {
  function attachEvents () {
    var submitButton = document.getElementById('ward-information-submit-button');
    submitButton.addEventListener('click', submitButtonListener);
  }

  function submitButtonListener () {
    getFormData();
  }

  function getFormData () {
    var selectWardElement = document.getElementById('ward-select');
    var selectDataTypeElement = document.getElementById('data-type-select');

    pickDestination({
        selectedWard: selectWardElement.options[selectWardElement.selectedIndex].value,
        selectedDataType: selectDataTypeElement.options[selectDataTypeElement.selectedIndex].value
    });
  }

  function pickDestination (options) {
    if (options.selectedWard === 'moseley' && options.selectedDataType === 'economy') {
        console.log('MWsustainability.html');
        window.location = 'MWsustainability.html';
    }

    if (options.selectedWard === 'balsall' && options.selectedDataType === 'community') {
        console.log('BHcommunity.html');
        window.location = 'BHcommunity.html';
    }
  }

  attachEvents();
}());

我这里有一个工作版本，其中包含一些额外的评论，希望能帮助您理解它。您将需要扩展此代码以使其适用于您的所有情况，并且我相信您还有其他要求可以将这些概念应用于这些要求。让我了解最新情况，我会尽我所能帮助您学习。

我很感激你能提供一些返回，但这是不必要的，就像你现在一样继续付出吧。祝你好运!

https://jsfiddle.net/rvb56sx6/