Question

我有一个多选下拉ID会动态，同时首先选择我如何制作另一个所有选择框值应该更改请选择

<Select id="colorselector-<?php echo $_product->getId()?>">
 <option value="">Select</option>
 <option value="red">Red</option>
 <option value="yellow">Yellow</option>
 <option value="blue">Blue</option>

<div id="red-<?php echo $_product->getId()?>" class="colors" style="display:none"> red... </div>
<div id="yellow-<?php echo $_product->getId()?>" class="colors" style="display:none"> yellow.. </div>
<div id="blue-<?php echo $_product->getId()?>" class="colors" style="display:none"> blue.. </div>

脚本

 <script type="text/javascript">
 jQuery(function($) {
$('#colorselector-<?php echo $_product->getId()?>').change(function(){
$('#dt2-<?php echo $_product->getId()?>').val("");
$('#dt1-<?php echo $_product->getId()?>').val("");
$('.colors').hide();
 $('#' + $(this).val() + '-<?php echo $_product->getId()?>').show();
 });

$('.chkbx-<?php echo $_product->getId()?>').click(function(){
var text = "";
$('.chkbx-<?php echo $_product->getId()?>:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);

$('#textbx-<?php echo $_product->getId()?>').val(text);
});
$(".individual-product-subescribe-<?php echo $_product->getId()?>").live("change", function() {
 $("#individual-product-subescribe-text-<?php echo $_product->getId()?>").val($(this).find("option:selected").attr("value"));
});
$('#individual-product-subescribe-text-<?php echo $_product->getId()?> option[value=Frank]').attr('selected','selected').change();
});

Answer 1

@my测试这里是我的回答。输出显示在下图中单击链接。

HTML代码和jquery脚本

    <!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<section class="container" style="margin-top:20px;">
    <div class="row">
        <div class="col-lg-3 col-md-3">
            <select class="select_1 form-control" id="select_1" data-id="<?php echo $id=1;?>">
                <option value="select">Select Color</option>
                <option value="red">Red</option>
                <option value="yellow">Yellow</option>
                <option value="blue">Blue</option>
            </select>
        </div>

        <div class="col-lg-3 col-md-3">
            <select class="select_2 form-control" id="select_2" data-id="<?php echo $id=1;?>" disabled>
                <option value="select">Please  Select Week</option>
                <option value="Sunday">Sunday</option>
                <option value="Monday">Monday</option>
                <option value="Tuesday">Tuesday</option>
                <option value="Wednesday">Wednesday</option>
                <option value="Thursday">Thursday</option>
                <option value="Friday">Friday</option>
                <option value="Saturday">Saturday</option>
            </select>
        </div>

        <div class="col-lg-3 col-md-3">
            <select class="select_3 form-control" id="select_3" data-id="<?php echo $id=1;?>" disabled>
                <option value="select">Please Select</option>
                <option value="Net banking">Net banking</option>
                <option value="Debit Cart">Debit Cart</option>
                <option value="Credit Cart">Credit Cart</option>
                <option value="Subscribe">Subscribe</option>
            </select>
        </div>

        <div class="col-lg-3 col-md-3">
            <select class="select_4 form-control" id="select_4" data-id="<?php echo $id=1;?>" disabled>
                <option value="select">Please Select</option>
                <option value="Cash On Delivery">Cash On Delivery</option>
                <option value="Gift Pack">Gift Pack</option>
                <option value="Subscribe">Subscribe</option>
            </select>
        </div>
    </div>
</section>


<script>
$(document).ready(function(){
    $(".select_1").change(function(){
        var select_1_selected = $(".select_1").val();

        if(select_1_selected != 'select'){
            $(".select_2").prop("disabled", false);
        }
        else
        {
            $(".select_2").prop("disabled", true);
            $(".select_3").prop("disabled", true);
            $(".select_4").prop("disabled", true);
        }
    });

    $(".select_2").change(function(){
        var select_1_selected = $(".select_2").val();

        if(select_1_selected != 'select'){
            $(".select_2").prop("disabled", false);
            $(".select_3").prop("disabled", false);
            $(".select_4").prop("disabled", false);

            $(".select_3, .select_4").html("<option>Subscribe</option>");
        }
        else
        {
            $(".select_3").prop("disabled", true);
            $(".select_4").prop("disabled", true);

            $(".select_3, .select_4").html("<option value='select'>Select</option>");
        }
    });
});
</script>
</body>
</html>

选择框更改默认选项以更改其他

1 个答案:

随意提问......