Javascript 字段选择HTML，重复错误
你好，我是巴西人，我有一个问题，我绞尽脑汁想弄明白为什么它在谷歌浏览器和火狐浏览器中运行得很好，而internet explorer遇到了麻烦，我会更好地解释 Google chrome是这样的： 在firefox和Internet Explorer中，如下所示： 是浏览器的问题吗？我试过几种方法来解决这个问题 解释单击“更多产品”时应执行的操作应与“选择”字段重复Javascript 字段选择HTML，重复错误,javascript,html,css,Javascript,Html,Css,你好，我是巴西人，我有一个问题，我绞尽脑汁想弄明白为什么它在谷歌浏览器和火狐浏览器中运行得很好，而internet explorer遇到了麻烦，我会更好地解释 Google chrome是这样的： 在firefox和Internet Explorer中，如下所示： 是浏览器的问题吗？我试过几种方法来解决这个问题 解释单击“更多产品”时应执行的操作应与“选择”字段重复 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/css_browser_selector.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.2.2.js"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>
<script>
$(document).ready (function () {
$('.btnAdd').click (function () {
$('.buttons').append('<div><style> .cmf-skinned-select{background-image:url(images/option.png) !important;width:252px !important;height: 29px !important; z-index:10;} .cmf-skinned-text{margin-top: 6px !important;} #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: red; } #selectable { list-style-type: none; margin: 0; padding: 0; width:400px; }#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }select{width: 249px;border: 0;}.dragme{position:relative;cursor: pointer !important;} .select-skin { width: 249px !important; position: absolute; margin-top: 6px; float: left; z-index:10; } .select-skin-mask {background: transparent !important;}.select-skin-text-clip {margin-right: 35px;overflow: hidden !important;background: transparent !important}.prod .select-skin{ float: left; width: 277px !important;height: 10px;}.gecko #alg{margin-left:-135px} .ie #alg{margin-left:-135px;width:62px;}#alg{position: absolute;width: 64px;border: 0;margin-top: 19px !important;margin-left: 95px;height: 28px;background-image: url(images/codarea.png);} div.styled { float:left; overflow:hidden; padding:0; margin:0; width:12em; border-radius:2px;} div.styled select { -webkit-appearance: none; border:none; padding:0.3em 0.5em; } option{color:red;} </style><div> <span id="produto">Produto</span> <span id="qtd" style="margin-left: 284px !important; float:left;">Quant.</span> <br> <span id="linha_orcamento" style="float: left;"><img src="images/orcamento_linha.png" alt=""> </span> <div class="styled" style="width: 259px !important;height: 49px;" ><select name="produto[]" class="select" id="select1" style="float: left;margin-top:20px;background-image: url(images/option.png) !important;height: 29px;width: 252px;margin-left: 7px;"> <option value="0">SELECIONE O PRODUTO</option> <option value="Barra Chata">Barra Chata</option> <option value="Cantoneira">Cantoneira</option> <option value="Chapa fina frio">Chapa fina frio</option> <option value="Chapa Fina Quente">Chapa Fina Quente</option> <option value="Chapa Galvaznizada">Chapa Galvaznizada</option> <option value="Chapa Grossa">Chapa Grossa</option> <option value="Chapa Xadrez">Chapa Xadrez</option> <option value="Ferro TEE">Ferro TEE</option><option value="Perfil UDC">Perfil UDC</option> <option value="Perfil UDCE">Perfil UDCE</option> <option value="Quadrado Laminado 1020/1045">Quadrado Laminado 1020/1045</option> <option value="Quadrado Trefilado 1020/1045">Quadrado Trefilado 1020/1045</option> <option value="Redondo Laminado 1020/1045">Redondo Laminado 1020/1045</option> <option value="Tubo Quadrado">Tubo Quadrado</option><option value="Tubo Redondo">Tubo Redondo</option> <option value="Tubo Retangular">Tubo Retangular</option><option value="Viga I">Viga I</option> <option value="Viga U">Viga U</option> <option value="Viga WH">Viga WH</option> </select></div><?php echo ($_POST['produto'])?><input type="text" name="qtd[]" class="input_qtd" id="alg" value="<?php echo $_POST['qtd'];?>"> <input type="button" class="btnRemove" style="background: url(images/-.png);width: 54px;border: 0;height: 14px;margin-left: 169px;margin-top: 22px;margin-bottom: 9px;cursor: pointer;"> <span style="color: #5c5858 !important;font-family: Futura-Bold !important;font-size: 12px !important;float:left;margin-top: 66px;margin-left: -228px;">observações</span> <span id="linha_orcamento" style="margin-top: 38px;margin-left: -259px;float: left;"><img src="images/orcamento_linha.png" alt=""> </span><span style="height:18px;"><textarea rows="0" cols="0" name="observacoes[]" class="observa" style="background-image: url(images/orcamento_obs.png);border: 0;width: 405px;height: 67px;z-index: 20;margin-left: 7px;margin-top:21px;"> <?php echo $_POST['observacoes'];?> </textarea> </div>'); // end append
$('div .btnRemove').last().click (function () {
$(this).parent().last().remove();
}); // end click
}); // end click
}); // end ready
</script>
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".input_codarea").mask("(99)");
$(".input_telefone").mask("9999-9999?9").live("focusout", function (event) {
var target, phone, element;
target = (event.currentTarget) ? event.currentTarget : event.srcElement;
phone = target.value.replace(/\D/g, "");
element = $(target); element.unmask();
if (phone.length > 8) {
element.mask("99999-999?9");
} else {
element.mask("9999-9999?9");
}
});
});
</script>
<style>
div.styled {
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
float: left !important:
/* this is the new drop button, in image form */
width:12em; border-radius:2px;
}
div.styled select {
/* this percentage effectively extends the drop down button out of view */;
/*background-color:transparent /* this hides the select's background making any styling visible from the div */;
/*background-image:none; */
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}
option{color:red;}
</style>
<div id="meio_orcamento"><?php
if(isset($_POST['enviarorcamento'])){
$empresa =$_POST["empresa"];
$nome = $_POST["nome"];
$email = $_POST["email"];
$codarea = $_POST["codarea"];
$telefone = $_POST["telefone"];
$produto =$_POST["produto"];
$qtd =$_POST["qtd"];
$observacoes = $_POST["observacoes"];
$status = $_POST["autorizo"]; //,'".$codarea."'
$for = $_POST["for"];
$observacoes = trim($_POST["observacoes"]);
if($status == 1){
$status ='sim';
}
else{
$status = 'nao';
}
$data = date('Y-m-d H:i:s');
if(empty($empresa)){
echo '<div style="font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira o nome da Empresa!</span></div>';
echo '<br/>';
}
elseif(empty($nome)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira seu nome!</span></div>';
echo '<br/>';
}
elseif(!filter_var($email , FILTER_VALIDATE_EMAIL)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira seu Email!</span></div>';
echo '<br/>';
}
elseif(empty($codarea)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira o DDD!</span></div>';
echo '<br/>';
}
elseif(empty($telefone)){
echo '<div style="color:#5c5858;font:12px futura-bold;text-align: center;"><span style="background-color: #5c5858;color:#dcb900;">Por Favor insira seu telefone!</span></div>';
echo '<br/>';
}
else{
$string = "INSERT INTO orcamento (empresa, nome, email, codArea, telefone) VALUES
('".$empresa."','".$nome." ','".$email."','".$codarea."','".$telefone."')";
mysql_query($string) or die(mysql_error());
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
/*echo'<pre>';
print_r($_POST);*/
echo $outra.'<br>';
for($i=0;$i < count($produto);$i++){
echo 'Produto: -- '.$produto[$i].'<br />';
echo 'quantidade: --'.$qtd[$i].'<br />';
echo 'Observação:--'.$observacoes[$i].'<br />';
}
?>
<div id="nada">
</div>
<div style="color:#5c5858;font:12px futura-bold;text-align: center;margin-right: 273px;">
Para entrar em contato com a Oeste Ferro ou receber <br>
nossos informativos, preencha os campos abaixo:</div>
<div id="alinha_contato">
<div id="nomes_orcamento">
<div class="n1" style="margin-left: 16px;margin-top: 24px;">Empresa:</div>
<div class="n1"style="margin-left:29px;;margin-top: 33px;">Nome:</div>
<div class="n1" style="margin-left:16px;margin-top: 31px;">E-mail:</div>
<div class="n1" style="margin-left:30px;margin-top: 34px;">Tel.:</div>
</div>
<div id="formulario">
<form method="post" name="form1" onsubmit="return valida();">
<div id="empresa">
<input type="text" name="empresa" class="input_nome" value="<?php echo $_POST['empresa'];?>"><img src="images/nome.png" alt="">
</div>
<div id="nome_orc">
<input type="text" name="nome" class="input_nome" value="<?php echo $_POST['nome'];?>"><img src="images/nome.png" alt="">
</div>
<div id="email">
<input type="text" name="email" class="input_email" value="<?php echo $_POST['email'];?>"><img src="images/email.png" alt="">
</div>
<div id="codarea">
<input type="text" name="codarea" class="input_codarea" value="<?php echo $_POST['codarea'];?>"><img src="images/codarea.png" alt="">
</div>
<div id="telefone">
<input type="telefone" name="telefone" class="input_telefone" value="<?php echo $_POST['telefone'];?>"><img src="images/telefone.png" alt="">
</div>
<div id="produto_orcamento">
<div id="camposTexto" style="color:#5c5858;font:12px futura-bold;">
<div id="pd" style="margin-top: 20px;"><div id="produto">Produto</div> <div id="qtd">Quant.</div></div>
<div id="linha_orcamento" style="margin-top:2px;" ><img src="images/orcamento_linha.png" alt=""></div>
<div style="margin-top: 20px;margin-left: 7px;">
<div id="list_produtos"> <style type="text/css">
.cmf-skinned-select{background-image:url(images/option.png) !important;width:252px !important;height: 29px !important;}
.ie .cmf-skinned-select{background-image:url(images/option.png) !important; z-index:20;width:252px !important;height: 29px !important;}
.cmf-skinned-text{margin-top: 6px !important;}
.ie .cmf-skinned-text{margin-top: 6px !important;}
#feedback { font-size: 1.4em; }
.ie #feedback { font-size: 1.4em; }
#selectable .ui-selecting {/* background: #FECA40;*/ }
.ie #selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: red;
.ie #selectable .ui-selected { background: #F39814; color: red; }
#selectable { list-style-type: none; margin: 0; padding: 0; width:400px;
.ie #selectable { list-style-type: none; margin: 0; padding: 0; width:400px; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
.ie #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<style> select{width: 249px;border: 0;}
.ie select{width: 249px;border: 0;background: transparent;}
.dragme{position:relative;cursor: pointer !important;}
.ie .dragme{position:relative;cursor: pointer !important;}
/* .select-skin {
width: 249px !important;
position: absolute;
margin-top: 6px;
float: left;
}
.ie .select-skin {
width: 249px !important;
position: absolute;
margin-top: 6px;
float: left;
}
.ie .select-skin-mask {
background: transparent !important;
}
.select-skin-mask {
background: transparent !important;
}
.ie .select-skin-mask {
background: transparent !important;
}
.select-skin-text-clip {
margin-right: 35px;
overflow: hidden !important;
background: transparent !important;
}
.ie .select-skin-text-clip {
margin-right: 35px;
overflow: hidden !important;
background: transparent !important;
}
.prod .select-skin{
float: left;
width: 277px !important;
height: 10px;
}
.ie .prod .select-skin{
float: left;
width: 277px !important;
height: 10px;
}
.ie select {-webkit-appearance: none;color:#5c5858;font:12px futura-bold!important;
padding:4px;
line-height: 21px;
}*/
div.styled {
overflow:hidden!important; /* this hides the select's drop button */
padding:0!important;
margin:0!important;
width:252px !important;
/* this is the new drop button, in image form */
width:12em; border-radius:2px!important;
}
.ie div.styled {
overflow:hidden!important; /* this hides the select's drop button */
padding:0!important;
margin:0!important;
width:252px !important;
/* this is the new drop button, in image form */
width:12em; border-radius:2px!important;
}
.ie div.styled select {
background-color:transparent /* this hides the select's background making any styling visible from the div */!important;
background-image:none!important;
-webkit-appearance: none /* this is required for Webkit browsers */!important;
border:none!important;
padding:0.3em 0.5em !important; /* padding should be added to the select, not the div */
}
option{color:red;}
</style>
<div class="styled">
<select name="produto[]" id="lprodutos" class="select">
<!--
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
for($i=0;$i < count($produto);$i++){
echo $produto[$i] ;
} --> <option value="Cliente não selecionou o produto">Selecione o produto</option>
<option value="Barra Chata">Barra Chata</option>
<option value="Cantoneira">Cantoneira</option>
<option value="Chapa fina frio">Chapa fina frio</option>
<option value="Chapa Fina Quente">Chapa Fina Quente</option>
<option value="Chapa Galvaznizada">Chapa Galvaznizada</option>
<option value="Chapa Grossa">Chapa Grossa</option>
<option value="Chapa Xadrez">Chapa Xadrez</option>
<option value="Ferro TEE">Ferro TEE</option>
<option value="Perfil UDC">Perfil UDC</option>
<option value="Perfil UDCE">Perfil UDCE</option>
<option value="Quadrado Laminado 1020/1045">Quadrado Laminado 1020/1045</option>
<option value="Quadrado Trefilado 1020/1045">Quadrado Trefilado 1020/1045</option>
<option value="Redondo Laminado 1020/1045">Redondo Laminado 1020/1045</option>
<option value="Tubo Quadrado">Tubo Quadrado</option>
<option value="Tubo Redondo">Tubo Redondo</option>
<option value="Viga I">Viga I</option>
<option value="Viga U">Viga U</option>
<option value="Viga WH">Viga WH</option>
</select>
</div>
</div>
<div id="imgqtd">
<input type="text" name="qtd[]" class="input_qtd"
style="position:absolute;width: 60px;border: 0;height: 24px;background-color: transparent;"
value="<?php
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
for($i=0;$i < count($produto);$i++){
echo $qtd[$i] ;
} ?> ">
<img src="images/codarea.png" alt="">
</div>
<div id="excluir">
<a href="#" ><img src="images/-.png" alt="" onclick="removerCampos(this);">
</a>
</div>
</div>
<div id="obs">observações</div>
<div id="linha_orcamento" style="margin-top:2px;">
<img src="images/orcamento_linha.png" alt="">
</div>
<div id="observacoes" style="height:18px;">
</div>
<textarea rows="0" cols="0" name="observacoes[]" class="observa"
style="background-image: url(images/orcamento_obs.png);border: 0;width: 405px;height: 67px;z-index: 20;margin-left: 7px;margin-top:2px;">
<?php
$produto=$_POST['produto'];
$qtd=$_POST['qtd'];
$observacoes=$_POST['observacoes'];
for($i=0;$i < count($produto);$i++){
echo $observacoes[$i] ;
} ?> </textarea>
</div>
<div class="buttons">
</div>
<div id="btnAdd" name="add_input" style="margin-top: 11PX;">
<a href="#" class="btnAdd" style="cursor:pointer;">
<span style="color: #5c5858 !important;font-family: Futura-Bold !important;font-size: 12px;margin-top: 6px;margin-left: 8px;">+ Produtos</span> </a></div>
<div id="linha_produto"><img src="images/produtos_linha.png" alt=""></div>
<div class="enviar_orcamento">
<input type="hidden" name="enviarorcamento">
<input type="image" src="images/enviar_orcamento.png" value="enviar" alt="" onsubmit="return valida();"/>
</div>
</div>
</div>
</form>
</div> </div>
$（文档）.ready（函数（）{
$（'.btnAdd'）。单击（函数（）{
$（'.buttons'）.append（'.cmf skined select{background image:url（images/option.png）！重要；宽度：252px！重要；高度：29px！重要；z-index:10；}.cmf skined text{margin top:6px！重要；}反馈{font size:1.4em；}可选。用户界面选择{background background:#FECA40；}可选。用户界面选择{background background:f319814；颜色：红色；}#可选{列表样式类型：无；边距：0；填充：0；宽度：400px；}#可选{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}选择{宽度：249px；边框：0；}。拖动{位置：相对；光标：指针！重要；}选择蒙皮{宽度：249px！重要；位置：绝对；边距顶部：6px；浮动：左侧；z索引：10；}。选择皮肤遮罩{背景：透明！重要；}。选择皮肤文本剪辑{右边距：35px；溢出：隐藏！重要；背景：透明！重要}。产品。选择皮肤{浮动：左；宽度：277px！重要；高度：10px；}。壁虎#alg{左边距：-135px}。即#alg{左边距：-135px；宽度：62px；}{位置：绝对；宽度：64px；边框：0；边框顶部：19px！重要；左边距：95px；高度：28px；背景图像：url（images/codarea.png）；}div.styled{float:left；溢出：hidden；padding:0；边距：0；宽度：12em；边框半径：2px；}div.styled选择{-webkit外观：无；边框：无；padding:0.3em 0.5em；}选项{颜色：红色；}生产数量。
选择生产商，在广州地区，在金融机构，在总公司，在Xadrez Ferro TEEPerfil，UDC，Quadrado Laminado 1020/1045，Quadrado Trefilado1020/1045 Redondo Lamindo 1020/1045 Tubo QuadradoTubo Redondo Tubo RetangularViga I Viga U Viga U Viga WH'）；//结束附加
$（'div.btnRemove'）.last（）。单击（函数（）{
$（this.parent（）.last（）.remove（）；
})；//结束单击
})；//结束单击
})//结束准备就绪
$（文档）.ready（函数（）{
$（“.input_codarea”）.mask（“（99）”）；
$（“.input_telefone”）.mask（“9999-9999？9”）.live（“focusout”，功能（事件）{
var目标、电话、元素；
target=（event.currentTarget）？event.currentTarget:event.src元素；
phone=target.value.replace（/\D/g，“”）；
element=$（目标）；element.unmask（）；
如果（电话长度>8）{
元素掩码（“99999-999-9”）；
}否则{
元素掩码（“9999-9999-9”）；
}
});
});
div.styled{
溢出：隐藏；/*这将隐藏select的下拉按钮*/
填充：0；
保证金：0；
浮动：左！重要提示：
/*这是新的下拉按钮，以图像形式显示*/
宽度：12em；边界半径：2px；
}
div.styled选择{
/*此百分比有效地将下拉按钮扩展到视图之外*/；
/*背景色：透明/*此选项隐藏选择的背景，使任何样式在div中可见*/；
/*背景图像：无*/
-webkit外观：无/*这是webkit浏览器所必需的*/；
边界：无；
盒影：无；
填充：0.3em 0.5em；/*填充应添加到select，而不是div*/
}
选项{颜色：红色；}
在接收到的铁的情况下，应将其放入容器中
nossos informativos，preencha os campos abaixo：
Empresa：
诺姆：
电邮：
电话：
你的代码在哪里？请包括你的HTML和CSS代码（如果你正在使用javascript的话）这将帮助我们了解问题所在。我将代码放在帖子中，是另一家公司制造了程序员-webkit外观：none/*这是webkit浏览器所必需的*/；
你需要在css中的webkit之后添加Firefox的供应商前缀：-moz外观：none；
我尝试过使用，但没有工作，仅在chrome、mozila firefox和internet explorer中工作不起作用