我有一个中级的Web开发知识初学者，并且正在做一个网页，询问人们一些个人数据。
这是关于失业的非正式研究。
这是我托管page的地方（它是巴西葡萄牙语）。
我已经从“乔布斯省”网站上获得了一份职业清单，并以此方式在SELECT字段中显示了该清单：
<?php
$ocupacoes = file('ocupacoes');
$options = '<option selected disabled>Selecione uma ocupação</option>';
foreach ($ocupacoes as $ocupacao) {
$options .= '<option value="'.$ocupacao.'">'.$ocupacao.'</option>';
}
$select = '<select id="ocupacoes" name="ocupacao">'.$options.'</select>';
echo $select;
?>
现在这就是我想要的：
人们能够轻松地搜索其职业，尤其是因为人们经常通过智能手机访问网站（在具有智能手机中数百个选项的列表中搜索一个选项很痛苦）。
我尝试使用Select2和Selectize进行此操作，但没有成功。
也许是因为我在php代码之后尝试使用它，我不知道。
我找到了datalist标记，但是我不想使用它，因为人们必须选择预定义的条目。
我发现JQuery UI可以提供帮助，但是我不知道该怎么做。
我需要一些帮助/帮助，因为我无法自行解决。
由于页面已链接，因此我也接受一些有关Web开发和/或代码的提示。
编辑：jQuery尚未定义。所以答案是我必须重新排列文件的导入，以便首先导入JQuery，然后才可以导入select2。
感谢https://stackoverflow.com/users/3367974/mehdi-dehghani帮助我通过控制台查看器找到它。
参考方案
<html>
<head>
<title>Projeto 02 - Desenvolvimento WEB</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://kelvin.96.lt/centralizaDivs.css">
<link rel="stylesheet" type="text/css" href="http://kelvin.96.lt/style.css">
<script type="text/javascript" src="http://kelvin.96.lt/validadores.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<legend id="formul">Formulário de pesquisa sobre desemprego</legend>
<form name="cadastro" action="index.php" method="post" onsubmit="return validaForm()">
<fieldset id="desemp">
<legend>Está desempregado?</legend>
<input type="radio" name="desempregado" value=1 id="d_sim" onclick="return validaOcupac()">
<label for="d_sim">Sim</label><br>
<input type="radio" name="desempregado" value=0 id="d_nao" onclick="return validaOcupac()">
<label for="d_nao">Não</label>
</fieldset>
<fieldset id="sex">
<legend>Selecione seu sexo</legend>
<input type="radio" name="sexo" value="Masculino" id="s_masculino">
<label for="s_masculino">Masculino</label><br>
<input type="radio" name="sexo" value="Feminino" id="s_feminino">
<label for="s_feminino">Feminino</label><br>
<input type="radio" name="sexo" value="Outros" id="s_outros">
<label for="s_outros">Outros</label>
</fieldset>
<fieldset>
<legend>Selecione seu nível de escolaridade</legend>
<select name="escolaridade">
<option selected disabled>Selecione o nível</option>
<option>Fundamental</option>
<option>Médio</option>
<option>Superior</option>
<option>Pós graduação</option>
</select><br>
<select name="emcurso">
<option selected disabled>-------------</option>
<option>Completo</option>
<option>Incompleto</option>
<option>Cursando</option>
</select>
</fieldset>
<fieldset>
<legend>De onde você é?</legend>
<select id="estados" name="estado">
</select><br>
<select id="cidades" name="cidade">
</select>
</fieldset>
<fieldset>
<legend>Idade</legend>
<input type="number" placeholder="Quantos anos você tem?" id="i_idade" name="idade">
</fieldset>
<fieldset>
<legend>Ocupação</legend>
<select id="ocupacoes" name="ocupacao">
<option selected disabled>Selecione uma ocupação</option><option value="Abatedor">Abatedor</option><option value="Acabador de calçados">Acabador de calçados</option>
<option value="Acabador de embalagens (flexíveis e cartotécnicas)">Acabador de embalagens (flexíveis e cartotécnicas)</option>
</select>
</fieldset>
<div id="botoes">
<input type="submit"> <input type="reset">
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#ocupacoes").select2();
$.getJSON('estados_cidades.json', function (data) {
var items = [];
var options = '<option selected disabled>Selecione seu estado</option>';
$.each(data, function (key, val) {
options += '<option value="' + val.nome + '">' + val.nome + '</option>';
});
$("#estados").html(options);
$("#estados").change(function () {
var options_cidades = '';
var str = "";
$("#estados option:selected").each(function () {
str += $(this).text();
});
$.each(data, function (key, val) {
if(val.nome == str) {
$.each(val.cidades, function (key_city, val_city) {
options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
});
}
});
$("#cidades").html(options_cidades);
}).change();
});
});
</script>
</body>
</html>
我正在使用使用Visual Studio模板创建的Web表单应用程序。模板具有一个内容占位符，该占位符被访问的任何页面的内容替换。有问题的页面有几个服务器控件，例如文本框，标签和按钮。当我单击我的更新按钮时，它可以正常工作，这些值会回传并更新数据库。我想在所有子页面上创建通用的登录提示。我的导航栏（位于我的母版页中）具有引导程序设置。我在导航栏中添加了一个下…
Telerik单选按钮所需的字段验证器 - javascript如何设置Telerik单选按钮所需的字段验证器？我想在按钮单击“ BtnSave”上设置必填字段验证器吗？请帮忙！<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…
表单不提交或按钮提交不起作用 - javascript据我所知，此代码必须有效，但是我编码时却无效问题在于该表单未提交。我该如何解决？选中时，我什至没有得到复选框的值。<table id="example" class="display" cellspacing="0" width="100%"> <thead&g…
其他打开时关闭选项 - javascript我有这样的html代码与echo一起打印： <input id="58" readonly="readonly" class="cell_to_edit" value="Accepted"> <span id="58" class="…
在PHP文件中调用javascript函数并在加载HTML文件之后？ - javascript我需要在我的php中调用js函数，但无法正常工作。有人可以告诉我我在做什么错吗？我该如何轻松地做到这一点？谢谢！我有三个文件： mail.php负责发送$ _POST的内容（工作正常）。我调用我的javascript函数来切换模式，具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…