如何从下拉菜单中禁用/启用之后/之前的选项?

时间:2017-05-04 16:31:30

标签: javascript jquery html svg

也许我的问题不明确,但这就是我要找的:

当我从 svg 中选择一个区域(在我的情况下,多边形)来自广告 rop-down菜单列表,该区域显示为橙色,然后当我从下拉菜单列表中选择另一个区域时,下一个区域显示为橙色,但前一个区域不会消失..为什么?我想只选择一个,而不是两个。

非常感谢

信息:

  1. " SEL1 "是我的下拉菜单的ID

  2. " 多边形"是我的 svg

  3. 的区域

    
    
    // start connection between svg and drop down menu
    
    // selection the "polygon" that affect the "select"
    $(".map-image").on('click', function(evt) {
      // Get the id of the region we clicked on
      var regionId = evt.target.id;
      // Update the dropdown
      $('#sel1 option').removeAttr('selected')
        .filter('[value=' + regionId + ']')
        .attr('selected', true);
      // Highlight the relevant region
      setRegion(regionId);
    });
    
    // select from the menu and have the color on the svg
    $("#sel1").change(function(evt) {
      //console.log($(this).val());
      var name_region = ($(this).val());
      var regions = $(document).find('#' + name_region).get(0);
      //console.log(regions);
      $(regions).css('fill', '#FF7409');
    });
    
    
    
    function onRectClick(evt) {
      // Get the id of the region we clicked on
      var regionId = evt.target.id;
      // Update the dropdown
      $("#sel1").val(regionId).change();
      // Highlight the relevant region
      setRegion(regionId);
    }
    
    
    function onSelectChange() {
      // Get selected class from dropdown
      var selectedRegion = $("#sel1").val();
      // Highlight the relevant region
      setRegion(selectedRegion);
    }
    
    function setRegion(regionId) {
      // Remove "selected" class from current region
      $(".region.selected").removeClass("selected");
      // Add "selected" class to new region
      $('polygon#' + regionId).addClass("selected");
      $('polygon#').find('map-title').css('display', 'block');
    
    
      // Note: for addClass() etc to work on SVGs, you need jQuery 3+
    }
    
    
    // Init map based on default select value
    //onSelectChange();
    // done connection between svg and drop down menu
    });
    
    polygon.selected {
      fill: #ff7409;
    }
    
    <!-- drop down menu -->
    <label for="sel1">Seleziona Area:</label>
    <select class="form-control" id="sel1">
      <option value="region1">1 - Udine Centro</option>
      <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option> 
      <option value="region3">3 - Laipacco / San Gottardo</option>
      <option value="region4">4 - Udine sud</option>
      <option value="region5">5 - Cussignacco</option>
      <option value="region6">6 - S. Paolo / S. Osvaldo</option>
      <option value="region7">7 - Chiavris / Paderno</option>
    </select>
    &#13;
    &#13;
    &#13;

0 个答案:

没有答案