在SELECT標記中搜索OPTION
[英]Search an OPTION in a SELECT tag
問題描述
我有一個中級的Web開發知識初學者，並且正在做一個網頁，詢問人們一些個人數據。
這是關於失業的非正式研究。
這是我托管頁面的地方 （它是巴西葡萄牙語）。
我已經從“喬布斯省”網站上獲得了一份職業清單，並以此方式在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進行此Selectize ，但沒有成功。
也許是因為我在php代碼之后嘗試使用它，我不知道。
我找到了datalist標記，但是我不想使用它，因為人們必須選擇預定義的條目。
我發現JQuery UI可以提供幫助，但是我不知道該怎么做。
我需要一些幫助/幫助，因為我無法自行解決。
由於頁面已鏈接，因此我也接受一些有關Web開發和/或代碼的提示。
編輯：jQuery尚未定義。 所以答案是我必須重新排列文件的導入，以便首先導入JQuery，然后才可以導入select2 。 感謝https://stackoverflow.com/users/3367974/mehdi-dehghani幫助我通過控制台查看器找到它。
4 個解決方案
解決方案1
0 2017-06-12 13:56:16
<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>
解決方案2
0 2017-06-12 13:56:49
使用select2將解決您的問題，只需導入jquery + CSS + JS select2並編寫呈現輸入的腳本，如下所示：
$(function(){
$("#ocupacoes").select2();
});
參見下面的工作片段：
$(function(){ $("#ocupacoes").select2(); });
#ocupacoes { width:80%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> <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><option value="Acabador de superfícies de concreto ">Acabador de superfícies de concreto </option><option value="Açougueiro ">Açougueiro </option><option value="Acrobata ">Acrobata </option><option value="Adestrador de animais ">Adestrador de animais </option><option value="Administrador ">Administrador </option><option value="Administrador de banco de dados ">Administrador de banco de dados </option><option value="Operador de bomba de concreto ">Operador de bomba de concreto </option><option value="Operador de branqueador de pasta para fabricação de papel ">Operador de branqueador de pasta para fabricação de papel </option><option value="Operador de britadeira (tratamentos químicos e afins) ">Operador de britadeira (tratamentos químicos e afins) </option><option value="Operador de britador de coque ">Operador de britador de coque </option><option value="Operador de britador de mandíbulas ">Operador de britador de mandíbulas </option><option value="Operador de cabine de laminação (fio-máquina) ">Operador de cabine de laminação (fio-máquina) </option><option value="Operador de caixa ">Operador de caixa </option><option value="Operador de calandra (química, petroquímica e afins) ">Operador de calandra (química, petroquímica e afins) </option><option value="Operador de calandras (tecidos) ">Operador de calandras (tecidos) </option><option value="Operador de calcinação (tratamento químico e afins) ">Operador de calcinação (tratamento químico e afins) </option><option value="Operador de caldeira ">Operador de caldeira </option><option value="Operador de câmaras frias ">Operador de câmaras frias </option><option value="Operador de câmera de televisão ">Operador de câmera de televisão </option><option value="Operador de caminhão (minas e pedreiras) ">Operador de caminhão (minas e pedreiras) </option><option value="Operador de cardas ">Operador de cardas </option><option value="Operador de carregadeira ">Operador de carregadeira </option><option value="Operador de carro de apagamento e coque ">Operador de carro de apagamento e coque </option><option value="Operador de ceifadeira na conservação de vias permanentes ">Operador de ceifadeira na conservação de vias permanentes </option><option value="Operador de central de concreto ">Operador de central de concreto </option><option value="Operador de central de rádio ">Operador de central de rádio </option><option value="Operador de central hidrelétrica ">Operador de central hidrelétrica </option><option value="Operador de central termoelétrica ">Operador de central termoelétrica </option><option value="Operador de centrifugadora (tratamentos químicos e afins) ">Operador de centrifugadora (tratamentos químicos e afins) </option><option value="Operador de centro de controle ">Operador de centro de controle </option><option value="Operador de centro de controle (ferrovia e metrô) ">Operador de centro de controle (ferrovia e metrô) </option><option value="Operador de centro de usinagem com comando numérico ">Operador de centro de usinagem com comando numérico </option><option value="Operador de centro de usinagem de madeira (cnc) ">Operador de centro de usinagem de madeira (cnc) </option><option value="Operador de chamuscadeira de tecidos ">Operador de chamuscadeira de tecidos </option><option value="Operador de cobrança bancária ">Operador de cobrança bancária </option><option value="Operador de colhedor florestal ">Operador de colhedor florestal </option><option value="Operador de colheitadeira ">Operador de colheitadeira </option><option value="Operador de compactadora de solos ">Operador de compactadora de solos </option><option value="Operador de compressor de ar ">Operador de compressor de ar </option><option value="Operador de computador (inclusive microcomputador) ">Operador de computador (inclusive microcomputador) </option><option value="Operador de concentração ">Operador de concentração </option><option value="Operador de conicaleira ">Operador de conicaleira </option><option value="Operador de cortadeira de papel ">Operador de cortadeira de papel </option><option value="Operador de cristalização na refinação de açucar ">Operador de cristalização na refinação de açucar </option><option value="Operador de desempenadeira na usinagem convencional de madeira ">Operador de desempenadeira na usinagem convencional de madeira </option><option value="Operador de desgaseificação ">Operador de desgaseificação </option><option value="Operador de destilação e subprodutos de coque ">Operador de destilação e subprodutos de coque </option><option value="Operador de digestor de pasta para fabricação de papel ">Operador de digestor de pasta para fabricação de papel </option><option value="Operador de docagem ">Operador de docagem </option><option value="Operador de draga ">Operador de draga </option><option value="Operador de empilhadeira ">Operador de empilhadeira </option><option value="Operador de enfornamento e desenfornamento de coque ">Operador de enfornamento e desenfornamento de coque </option><option value="Operador de engomadeira de urdume ">Operador de engomadeira de urdume </option><option value="Operador de entalhadeira (usinagem de madeira) ">Operador de entalhadeira (usinagem de madeira) </option><option value="Operador de equipamento de destilação de álcool ">Operador de equipamento de destilação de álcool </option><option value="Operador de equipamento de secagem de pintura ">Operador de equipamento de secagem de pintura </option><option value="Operador de equipamento para resfriamento ">Operador de equipamento para resfriamento </option><option value="Operador de equipamentos de preparação de areia ">Operador de equipamentos de preparação de areia </option><option value="Operador de equipamentos de refinação de açúcar (processo contínuo) ">Operador de equipamentos de refinação de açúcar (processo contínuo) </option><option value="Operador de escavadeira ">Operador de escavadeira </option><option value="Operador de escória e sucata ">Operador de escória e sucata </option><option value="Operador de esmaltadeira ">Operador de esmaltadeira </option><option value="Operador de espelhamento ">Operador de espelhamento </option><option value="Operador de espessador ">Operador de espessador </option><option value="Operador de espuladeira ">Operador de espuladeira </option><option value="Operador de estação de bombeamento ">Operador de estação de bombeamento </option><option value="Operador de estação de captação, tratamento e distribuição de água ">Operador de estação de captação, tratamento e distribuição de água </option><option value="Operador de estação de tratamento de água e efluentes ">Operador de estação de tratamento de água e efluentes </option><option value="Operador de evaporador na destilação ">Operador de evaporador na destilação </option><option value="Operador de exaustor (coqueria) ">Operador de exaustor (coqueria) </option><option value="Operador de exploração de petróleo ">Operador de exploração de petróleo </option><option value="Operador de externa (rádio) ">Operador de externa (rádio) </option><option value="Operador de extração de café solúvel ">Operador de extração de café solúvel </option><option value="Operador de extrusora (química, petroquímica e afins) ">Operador de extrusora (química, petroquímica e afins) </option><option value="Pesquisador de engenharia metalúrgica, de minas e de materiais ">Pesquisador de engenharia metalúrgica, de minas e de materiais </option><option value="Pesquisador de engenharia química ">Pesquisador de engenharia química </option><option value="Pesquisador de medicina básica ">Pesquisador de medicina básica </option><option value="Pesquisador em biologia ambiental ">Pesquisador em biologia ambiental </option><option value="Pesquisador em biologia animal ">Pesquisador em biologia animal </option><option value="Pesquisador em biologia de microorganismos e parasitas ">Pesquisador em biologia de microorganismos e parasitas </option><option value="Pesquisador em biologia humana ">Pesquisador em biologia humana </option><option value="Pesquisador em biologia vegetal ">Pesquisador em biologia vegetal </option><option value="Pesquisador em ciências agronômicas ">Pesquisador em ciências agronômicas </option><option value="Pesquisador em ciências da computação e informática ">Pesquisador em ciências da computação e informática </option><option value="Pesquisador em ciências da educação ">Pesquisador em ciências da educação </option><option value="Pesquisador em ciências da pesca e aqüicultura ">Pesquisador em ciências da pesca e aqüicultura </option><option value="Pesquisador em ciências da terra e meio ambiente ">Pesquisador em ciências da terra e meio ambiente </option><option value="Pesquisador em ciências da zootecnia ">Pesquisador em ciências da zootecnia </option><option value="Pesquisador em ciências florestais ">Pesquisador em ciências florestais </option><option value="Publicitário ">Publicitário </option><option value="Pugilista ">Pugilista </option><option value="Queijeiro na fabricação de laticínio ">Queijeiro na fabricação de laticínio </option><option value="Químico ">Químico </option><option value="Químico industrial ">Químico industrial </option><option value="Quiropraxista ">Quiropraxista </option><option value="Rachador de couros e peles ">Rachador de couros e peles </option><option value="Radiotelegrafista ">Radiotelegrafista </option><option value="Raizeiro ">Raizeiro </option><option value="Rebaixador de couros ">Rebaixador de couros </option><option value="Rebarbador de metal ">Rebarbador de metal </option><option value="Rebitador a martelo pneumático ">Rebitador a martelo pneumático </option><option value="Rebitador, a mão ">Rebitador, a mão </option><option value="Recebedor de apostas (loteria) ">Recebedor de apostas (loteria) </option><option value="Recebedor de apostas (turfe) ">Recebedor de apostas (turfe) </option><option value="Recepcionista de banco ">Recepcionista de banco </option><option value="Recepcionista de casas de espetáculos ">Recepcionista de casas de espetáculos </option><option value="Recepcionista de consultório médico ou dentário ">Recepcionista de consultório médico ou dentário </option><option value="Recepcionista de hotel ">Recepcionista de hotel </option><option value="Recepcionista de seguro saúde ">Recepcionista de seguro saúde </option><option value="Recepcionista, em geral ">Recepcionista, em geral </option><option value="Recreador ">Recreador </option><option value="Recreador de acantonamento ">Recreador de acantonamento </option><option value="Recuperador de guias e cilindros ">Recuperador de guias e cilindros </option><option value="Redator de publicidade ">Redator de publicidade </option><option value="Redator de textos técnicos ">Redator de textos técnicos </option><option value="Redeiro ">Redeiro </option><option value="Redeiro (pesca) ">Redeiro (pesca) </option><option value="Refinador de óleo e gordura ">Refinador de óleo e gordura </option><option value="Refinador de sal ">Refinador de sal </option><option value="Relações públicas ">Relações públicas </option><option value="Relojoeiro (fabricação) ">Relojoeiro (fabricação) </option><option value="Relojoeiro (reparação) ">Relojoeiro (reparação) </option><option value="Remetedor de fios ">Remetedor de fios </option><option value="Reparador de aparelhos de telecomunicações em laboratório ">Reparador de aparelhos de telecomunicações em laboratório </option><option value="Reparador de aparelhos eletrodomésticos (exceto imagem e som) ">Reparador de aparelhos eletrodomésticos (exceto imagem e som) </option><option value="Reparador de equipamentos de escritório ">Reparador de equipamentos de escritório </option><option value="Reparador de equipamentos fotográficos ">Reparador de equipamentos fotográficos </option><option value="Reparador de instrumentos musicais ">Reparador de instrumentos musicais </option><option value="Reparador de rádio, tv e som ">Reparador de rádio, tv e som </option><option value="Repórter (exclusive rádio e televisão) ">Repórter (exclusive rádio e televisão) </option><option value="Repórter de rádio e televisão ">Repórter de rádio e televisão </option><option value="Repórter fotográfico ">Repórter fotográfico </option><option value="Repositor de mercadorias ">Repositor de mercadorias </option><option value="Representante comercial autônomo ">Representante comercial autônomo </option><option value="Restaurador de instrumentos musicais (exceto cordas arcadas) ">Restaurador de instrumentos musicais (exceto cordas arcadas) </option><option value="Restaurador de livros ">Restaurador de livros </option><option value="Retalhador de carne ">Retalhador de carne </option><option value="Revelador de filmes fotográficos, em cores ">Revelador de filmes fotográficos, em cores </option><option value="Revelador de filmes fotográficos, em preto e branco ">Revelador de filmes fotográficos, em preto e branco </option><option value="Revestidor de interiores (papel, material plástico e emborrachados) ">Revestidor de interiores (papel, material plástico e emborrachados) </option><option value="Revestidor de superfícies de concreto ">Revestidor de superfícies de concreto </option><option value="Revisor de fios (produção têxtil) ">Revisor de fios (produção têxtil) </option><option value="Revisor de tecidos acabados ">Revisor de tecidos acabados </option><option value="Revisor de tecidos crus ">Revisor de tecidos crus </option><option value="Revisor de texto ">Revisor de texto </option><option value="Riscador de estruturas metálicas ">Riscador de estruturas metálicas </option><option value="Riscador de roupas ">Riscador de roupas </option><option value="Sacristão ">Sacristão </option><option value="Salgador de alimentos ">Salgador de alimentos </option><option value="Salsicheiro (fabricação de lingüiça, salsicha e produtos similares) ">Salsicheiro (fabricação de lingüiça, salsicha e produtos similares) </option><option value="Salva-vidas ">Salva-vidas </option><option value="Sanitarista ">Sanitarista </option><option value="Sapateiro (calçados sob medida) ">Sapateiro (calçados sob medida) </option><option value="Sargento bombeiro militar ">Sargento bombeiro militar </option><option value="Sargento da policia militar ">Sargento da policia militar </option><option value="Secador de madeira ">Secador de madeira </option><option value="Secretária trilíngüe ">Secretária trilíngüe </option><option value="Secretária(o) executiva(o) ">Secretária(o) executiva(o) </option><option value="Secretário bilíngüe ">Secretário bilíngüe </option><option value="Secretário - executivo ">Secretário - executivo </option><option value="Segundo oficial de máquinas da marinha mercante ">Segundo oficial de máquinas da marinha mercante </option><option value="Segundo tenente de polícia militar ">Segundo tenente de polícia militar </option><option value="Selecionador de material reciclável ">Selecionador de material reciclável </option><option value="Seleiro ">Seleiro </option><option value="Senador ">Senador </option><option value="Sepultador ">Sepultador </option><option value="Sericultor ">Sericultor </option><option value="Seringueiro ">Seringueiro </option><option value="Serrador de bordas no desdobramento de madeira ">Serrador de bordas no desdobramento de madeira </option><option value="Serrador de madeira ">Serrador de madeira </option><option value="Serrador de madeira (serra circular múltipla) ">Serrador de madeira (serra circular múltipla) </option><option value="Serrador de madeira (serra de fita múltipla) ">Serrador de madeira (serra de fita múltipla) </option><option value="Serralheiro ">Serralheiro </option><option value="Servente de obras ">Servente de obras </option><option value="Subprocurador-geral da república ">Subprocurador-geral da república </option><option value="Subprocurador-geral do trabalho ">Subprocurador-geral do trabalho </option><option value="Supervisor de manutenção eletromecânica ">Supervisor de manutenção eletromecânica </option><option value="Supervisor de manutenção eletromecânica (utilidades) ">Supervisor de manutenção eletromecânica (utilidades) </option><option value="Supervisor de manutenção eletromecânica industrial, comercial e predial ">Supervisor de manutenção eletromecânica industrial, comercial e predial </option><option value="Teólogo ">Teólogo </option><option value="Terapeuta holístico ">Terapeuta holístico </option><option value="Terapeuta ocupacional ">Terapeuta ocupacional </option><option value="Tesoureiro de banco ">Tesoureiro de banco </option><option value="Tingidor de couros e peles ">Tingidor de couros e peles </option><option value="Tingidor de roupas ">Tingidor de roupas </option><option value="Tipógrafo ">Tipógrafo </option><option value="Titeriteiro ">Titeriteiro </option><option value="Topógrafo ">Topógrafo </option><option value="Torneiro (lavra de pedra) ">Torneiro (lavra de pedra) </option><option value="Torneiro na usinagem convencional de madeira ">Torneiro na usinagem convencional de madeira </option><option value="Torrador de cacau ">Torrador de cacau </option><option value="Torrador de café ">Torrador de café </option><option value="Torrista (petróleo) ">Torrista (petróleo) </option><option value="Tosador de animais domésticos ">Tosador de animais domésticos </option><option value="Tropeiro ">Tropeiro </option><option value="Turismólogo ">Turismólogo </option><option value="Viveirista florestal ">Viveirista florestal </option><option value="Xaropeiro ">Xaropeiro </option><option value="Zelador de edifício ">Zelador de edifício </option><option value="Zootecnista">Zootecnista</option> </select>
解決方案3
0 2017-06-12 14:24:27
頭
<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>
JAVASCRIPT
<script>
$(document).ready(function () {
$("#ocupacoes").select2();
});
</script>
解決方案4
0 已采納 2017-06-12 17:02:10
我必須重新排列文件的導入，因此首先導入了JQuery，然后才可以導入select2。
感謝Mehdi Dehgani幫助您通過控制台日志找到答案。
我的 Select 搜索選項在腳本標簽內不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.