Question

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

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

网站上的一个主要选项是人们可以搜索以获取资源。这是界面：

是否有一种非常简单的方法可以将其链接起来？例如，如果有人点击了Balsall Heath Ward＆＃39;然后是社区＆＃39;在下拉菜单中然后单击搜索，它将把它们带到BHcommunity.html，它将拥有资源。如果有人点击了Moseley Ward＆＃39;然后点击“可持续性”＃39;然后现在搜索，它将把它们带到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/

Answer 2

您可以考虑制作一个JSON文件或Javascript对象，其中包含您需要的所有链接的字符串值。然后创建一个获取下拉菜单值的函数，并相应地选择一个链接。另外，请考虑使用Jquery来简化此过程。（我在这个例子中使用它。意味着如果你想使用以下功能必须使用它）。您可以通过在html中添加以下脚本标记来包含它，然后使用以下函数添加文件的脚本标记。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="path/to/JS/File/with/below/function"></script>

Javascript对象

var links = { 
  balsallHeathWard {
    community: '<Link to community>'
    ...
  },
  ...
}

Javascript函数

$(function goToLink() {
  $(document).on('click', '#<submitButtonIdName>', function(){
    var ward = $('#<wardChooserSelectTagIdName>').val();
    var subchoice = $('#<subChoiceTagIDName>').val();
    if(ward == "Balsall Heath Ward") {
      if(subchoice == "Community") {
        window.location.href = links.balsallHeathWard.community;
      } else if ...
     ...
    } else if ...
    ...
  });
})();

该函数看起来像上面的函数。我无法完成它，因为我没有从慈善网站中选择的所有选项和链接。但这是一个普遍的想法。它肯定需要工作，但如果你需要它我愿意帮助（我对慈善机构情有独钟）。

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

2 个答案:

Javascript对象

Javascript函数