我有初级到中级的网络开发知识，我正在制作一个询问人们一些个人数据的网页。
这是一项关于失业的非正式研究。
这是我主持page的地方(巴西葡萄牙语)。
我从“Ministry of Jobs”网站获得了一份职业列表，我以这种方式在 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 可以提供帮助，但我不知道该怎么做。
我需要一些帮助/光明，因为我自己无法弄清楚。
我也接受一些关于网络开发和/或我的代码的提示，因为该页面是链接的。
<小时/>编辑: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>
关于javascript - 在 SELECT 标签中搜索 OPTION，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44500873/